Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как найти текст последнего элемента, если id немного отличаются. (https://javascript.ru/forum/dom-window/54035-kak-najjti-tekst-poslednego-ehlementa-esli-id-nemnogo-otlichayutsya.html)

mastersss 28.02.2015 20:36
Как найти текст последнего элемента, если id немного отличаются.
 
Приветствую всех!

Есть поля инпут type="text" у которых есть id типа acf-field-id="field_54ef5f88727d7_2_field_54ef5f88727da" , где вместо 2 может быть любое число(как правило увеличивается сверху вниз с шагом 1).
Как найти текст последнего(нижнего) инпута?

Safort 28.02.2015 20:56
Попробуй что-то типа этого
alert(document.querySelector('input:last-child').value);

mastersss 28.02.2015 21:08
дело в том, что кроме
field_54ef5f88727d7_2_field_54ef5f88727da
на странице есть еще много разных инпутов
т.е. там таблица на несколько колонок и в каждой колонке свой тип инпутов, вот нужно найти текст в последнем инпуте именно определенной колонки, у которой ид такого типа field_54ef5f88727d7_2_field_54ef5f88727da, где вместо 2 разные числа

рони 28.02.2015 21:40
mastersss,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
 <input   id="field_54ef5f88727d7_200_field_54ef5f88727da">
 <input   id="field_54ef5f88727d7_2_field_54ef5f88727da">
 <input   id="field_54ef5f88727d7_7_field_54ef5f88727da" value="test">
<script>
alert(document.querySelector('[id^="field_54ef5f88727d7_"]:last-of-type').value);
</script>

</body>

</html>

mastersss 28.02.2015 21:56
Цитата:
Сообщение от рони (Сообщение 359062)
mastersss,

<input id="field_54ef5f88727d7_200_field_54ef5f88727da">
<input id="field_54ef5f88727d7_2_field_54ef5f88727da">
<input id="field_54ef5f88727d7_7_field_54ef5f88727da" value="test">
<script>
alert(document.querySelector('[id^="field_54ef5f88727d7_"]:last-of-type').value);
</script>
[/html]
спасибо, а можно как-то задействовать и последнюю часть id?
что-то типа field_54ef5f88727d7_[0-9]*_field_54ef5f88727da

рони 28.02.2015 22:10
mastersss,
нет либо часть* либо начало^ или конец$ или написать функцию фильтрации

mastersss 28.02.2015 22:15
почему-то находит первый элемент по document.querySelector('[id$="54ef5eac77c17"]:last-of-type').value
и по * тоже

рони 28.02.2015 22:22
mastersss,
значит других нет

рони 28.02.2015 22:23
mastersss,
<input   id="field_54ef5f88727d7_200_field_54ef5f88727da">
 <input   id="field_54ef5f88727d7_2_field_54ef5f88727da">
 <input   id="field_54ef5f88727d7_7_field_54ef5f88727da" value="test">
<script>
alert(document.querySelector('[id$="54ef5f88727da"]:last-of-type').value);
</script>

mastersss 01.03.2015 10:21 
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>
<body>

<table>

<tr class="row">
<td class="field sub_field field_type-text field_key-field_54ef5eac77c17" data-field_type="text" data-field_key="field_54ef5eac77c17" data-field_name="ball">
				<div class="inner">
				<div class="acf-input-wrap"><input type="text" id="acf-field-field_54ef5de677c14_0_field_54ef5eac77c17" class="text" name="fields[field_54ef5de677c14][0][field_54ef5eac77c17]" value="55" placeholder=""></div>				</div>
			</td>
</tr>




<tr class="row">
<td class="field sub_field field_type-text field_key-field_54ef5eac77c17" data-field_type="text" data-field_key="field_54ef5eac77c17" data-field_name="ball">
				<div class="inner">
				<div class="acf-input-wrap"><input type="text" id="acf-field-field_54ef5de677c14_1_field_54ef5eac77c17" class="text" name="fields[field_54ef5de677c14][1][field_54ef5eac77c17]" value="66" placeholder=""></div>				</div>
			</td>
</tr>




<tr class="row">
<td class="field sub_field field_type-text field_key-field_54ef5eac77c17" data-field_type="text" data-field_key="field_54ef5eac77c17" data-field_name="ball">
				<div class="inner">
				<div class="acf-input-wrap"><input type="text" id="acf-field-field_54ef5de677c14_2_field_54ef5eac77c17" class="text" name="fields[field_54ef5de677c14][2][field_54ef5eac77c17]" value="77" placeholder=""></div>				</div>
			</td>
</tr>

</table>


<script>
alert(document.querySelector('[id$="_field_54ef5eac77c17"]:last-of-type').value);
</script>

</body>
</html>



вместо 77 находит 55 :-E

рони 01.03.2015 11:09
mastersss,
для такой структуры можно 
alert(document.querySelector('.row:last-child input').value);

mastersss 01.03.2015 12:14
Спасибо!
alert(document.querySelector('.row:last-child [id$="54ef5eac77c17"]').value);
так? что-то не хочет ;(

рони 01.03.2015 12:23
Цитата:
Сообщение от mastersss
так? что-то не хочет ;(
а зачем именно так, а не так, как в 11 посте ?:)

mastersss 01.03.2015 12:36
на странице много разных инпутов и отличает их последняя часть id, в данном случае у наших трех инпутов id="......54ef5eac77c17"

рони 01.03.2015 12:45
mastersss,
какую структуру приводите такой код и получаите, учите селекторы и основы js.
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

 </head>
<body>

<table>

<tr class="row">
<td class="field sub_field field_type-text field_key-field_54ef5eac77c17" data-field_type="text" data-field_key="field_54ef5eac77c17" data-field_name="ball">
				<div class="inner">
				<div class="acf-input-wrap"><input type="text" id="acf-field-field_54ef5de677c14_0_field_54ef5eac77c17" class="text" name="fields[field_54ef5de677c14][0][field_54ef5eac77c17]" value="55" placeholder=""></div>				</div>
			</td>
</tr>




<tr class="row">
<td class="field sub_field field_type-text field_key-field_54ef5eac77c17" data-field_type="text" data-field_key="field_54ef5eac77c17" data-field_name="ball">
				<div class="inner">
				<div class="acf-input-wrap"><input type="text" id="acf-field-field_54ef5de677c14_1_field_54ef5eac77c17" class="text" name="fields[field_54ef5de677c14][1][field_54ef5eac77c17]" value="66" placeholder=""></div>				</div>
			</td>
</tr>




<tr class="row">
<td class="field sub_field field_type-text field_key-field_54ef5eac77c17" data-field_type="text" data-field_key="field_54ef5eac77c17" data-field_name="ball">
				<div class="inner">
				<div class="acf-input-wrap"><input type="text" id="acf-field-field_54ef5de677c14_2_field_54ef5eac77c17" class="text" name="fields[field_54ef5de677c14][2][field_54ef5eac77c17]" value="77" placeholder=""></div>				</div>
			</td>
</tr>

</table>


<script>
var i = document.querySelectorAll('input[id$="54ef5eac77c17"]'), l = i.length-1;
alert(i[l].value);
</script>

</body>
</html>

mastersss 01.03.2015 13:49
рони, Спасибо!
так заработало как нужно: var i = document.querySelectorAll('.row input[id$="_field_54ef5eac77c17"]'), l = i.length-1;
:thanks:


Часовой пояс GMT +3, время: 01:34.