nächste, nächste Selektor funktioniert nicht Jquery

Question

Hallo in der folgenden HTML, jquery nächsten und nächsten Selektor funktioniert nicht .

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

wenn ich versuche alert ($(".class1").next(".class2").text()), alert ($(".class1").closest(".class2").text()) beide Alarmierungs leer .I brauchen ja aufmerksam zu machen.

Was ist der Fehler im Code?

Answer 1

next() ist das <br> nicht das Element mit Klasse .class2. Verwenden Sie eine andere 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>

Wenn mehrere <br> Elemente sind, können Sie nextAll() verwenden:

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 erst bei der nächsten unmittelbaren sieht Geschwister. Was Sie wollen, ist 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

Die divs mit class1 und class2 auf dem gleichen Niveau in der dom sind. Sie können also innerhalb der Geschwister von class1 suchen und nach class2 suchen.

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

Oder Sie könnten das Elternelement von beiden verwenden, um die Klasse2 darunter zu finden.

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

Answer 4

Als next() nur sofort gezielt folgende Geschwister somit Ihr Code nicht funktioniert hat.

Sie können .parent() dann verwenden Sie .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>