следующий, ближайший селектор не работает JQuery

Question

Привет в следующем html, jQuery следующий и ближайший селектор не работает .

<div> 
    <div class="class1" style=" background-color: red"> hi </div> 
    <br> 
    <div class="class2">Yes</div> 
</div> 

при попытке alert ($(".class1").next(".class2").text()), alert ($(".class1").closest(".class2").text()) и оповещения пустым .I необходимо предупредить да.

Какая ошибка в коде.

Answer 1

next()<br> не элемент с классом .class2. Используйте другой next():

alert($(".class1").next().next(".class2").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="class1" style=" background-color: red">hi</div> 
 
    <br> 
 
    <div class="class2">Yes</div> 
 
</div>

Если есть несколько <br> элементов, которые вы можете использовать nextAll():

alert($(".class1").nextAll(".class2").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="class1" style=" background-color: red">hi</div> 
 
    <br> 
 
    <div class="class2">Yes</div> 
 
</div>

Answer 2

next смотрит только на следующем немедленном родственный. Что вы хотите nextAll:

console.log($(".class1").nextAll(".class2").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="class1" style=" background-color: red"> hi </div> 
 
    <br> 
 
    <div class="class2">Yes</div> 
 
</div>

Answer 3

дивы с class1 и class2 находятся на том же уровне в йот. Таким образом, вы можете посмотреть в браке и классе class1.

$(".class1").siblings('.class2').text() 
// => "Yes" 

Или вы можете использовать родительский элемент для того, чтобы найти под ним класс2.

$(".class1").parent().find('.class2').text() 
// => "Yes" 

Answer 4

Как next() только цель сразу после двойников, таким образом, ваш код не работал.

Вы можете получить .parent(), а затем использовать .find()/.children().

$(".class1").parent('div').find(".class2").text() 

console.log($(".class1").parent('div').find(".class2").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="class1" style=" background-color: red">hi</div> 
 
    <br> 
 
    <div class="class2">Yes</div> 
 
</div>