次に、最も近いセレクタが動作していないJquery

Question

こんにちは、jqueryの次の最も近いセレクタが動作していません 。

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

私は両方が空白.Iを警告alert ($(".class1").next(".class2").text())、alert ($(".class1").closest(".class2").text())を試してみてくださいはいを警告する必要があります。

コード内のエラーは何ですか？

Answer 1

next()は、.class2の要素ではなく、<br>です。別の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>

あなたがnextAll()を使用することができ、複数の<br>要素がある場合：

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です：クラス1とクラス2と

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

div要素は、DOM内の同じレベルにあります。だから、あなたはclass1の兄弟を見てclass2を検索することができました。

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

または、両方の親要素を使用して、その下のclass2を見つけることができます。

$(".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>