Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Найти следующий элемент с нужным классом (https://javascript.ru/forum/jquery/55151-najjti-sleduyushhijj-ehlement-s-nuzhnym-klassom.html)

SKLNSK 15.04.2015 22:01
Найти следующий элемент с нужным классом
 
Есть следующий код. Я хочу увидеть, чтобы при нажатии отображалось значение третьего инпута - т.е. найти следующий элемент за текущим с нужным классом.

Думаю как сделать, чтобы показывало значение третьего инпута = "333"

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	
</head>

<body >

<input class=edit_add type=text value='111'><br><br>
<div class=mydiv id=divid onclick="f1();">
Нажми меня
</div>
<input class=edit_add2 type=text value='222'><br><br>
<input class=edit_add type=text value='333'><br><br>
<input class=edit_add type=text value='444'><br><br>

<script>
	function f1(){
	   alert($(this).next('.edit_add').val());
    };
</script>

</body>
</html>

рони 15.04.2015 22:08
SKLNSK,
читайте что такое this , фунции jquery и как назначаются обработчики
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
	<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body >

<input class=edit_add type=text value='111'><br><br>
<div class=mydiv id=divid onclick="f1(event);">
Нажми меня
</div>
<input class=edit_add2 type=text value='222'><br><br>
<input class=edit_add type=text value='333'><br><br>
<input class=edit_add type=text value='444'><br><br>

<script>
	function f1(event){
	   alert($(event.target).nextAll('.edit_add').val());
    };
</script>

</body>
</html>

theKingOfJava 15.04.2015 22:10 
<html>
<head>
</head>
 
<body >
 
<input class=edit_add type=text value='111'><br><br>
<div class=mydiv id=divid onclick="f1();">
push me
</div>
<input class=edit_add2 type=text value='222'><br><br>
<input class=edit_add type=text value='333'><br><br>
<input class=edit_add type=text value='444'><br><br>
 
<script>
    function f1(){
      alert(document.querySelectorAll(".edit_add")[1].value)
    };
</script>
 
</body>
</html>

рони 15.04.2015 22:11
SKLNSK,
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
	<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body >

<input class=edit_add type=text value='111'><br><br>
<div class=mydiv id=divid >
Нажми меня
</div>
<input class=edit_add2 type=text value='222'><br><br>
<input class=edit_add type=text value='333'><br><br>
<input class=edit_add type=text value='444'><br><br>

<script>
	function f1(){
	   alert($(this).nextAll('.edit_add').val());
    };
    $('#divid').click(f1)
</script>

</body>
</html>

SKLNSK 16.04.2015 04:49
Спасибо, вариант alert($(event.target).nextAll('.edit_add').val()); очень даже хорошо подошел.


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