子要素から次の子要素をプレビューします。

Question

このように多くの質問がありましたが、解決策を見つけることができませんでした。

targetクラスをクリックすると、他の次のtargetクラスが見つかりません。ここまで私がこれまでしてきたことはありますが、うまくいかないようです。

ありがとうございます！

$(document).ready(function(){ 
 
    $('.target').click(function(){ 
 
    if ($(this).parent().next().is('.target')) { 
 
     var link = $(this).parent().next().is('.target'); 
 
     console.log(link.text()); 
 
    } 
 
    }) 
 
})

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
     <div class="image-here"></div> 
 
     <div class="target">First description</div> 
 
    </li> 
 
    <li> 
 
    <div class="image-here"></div> 
 
     <div class="target">Second description</div> 
 
    </li> 
 
    <li> 
 
     <div class="image-here"></div> 
 
     <div class="target">Third description</div> 
 
    </li> 
 
    <li> 
 
     <div class="image-here"></div> 
 
     <div class="target">Fourth description</div> 
 
    </li> 
 
</ul>

Answer 1

$(document).ready(function() { 
 
    $('.target').click(function() { 
 
    console.log($(this).parent().next('li').find('.target').text()); 
 
    console.log($(this).parent().next('li').find('div').hasClass('target')) 
 
    if($(this).parent().next('li').find('div').hasClass('target')){//true if there is next parent li with div with class name target 
 
     
 
    
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div class="image-here"></div> 
 
    <div class="target">First description</div> 
 
    </li> 
 
    <li> 
 
    <div class="image-here"></div> 
 
    <div class="target">Second description</div> 
 
    </li> 
 
    <li> 
 
    <div class="image-here"></div> 
 
    <div class="target">Third description</div> 
 
    </li> 
 
    <li> 
 
    <div class="image-here"></div> 
 
    <div class="target">Fourth description</div> 
 
    </li> 
 
</ul>

クラスを持つ要素を取得するには、次のLiを取得した後、使用.find()target

Answer 2

あなたnext()要素が<li>と01をやってます<li>にクラス.targetがあるかどうかを確認しています。

$('.target').click(function() { 
console.log($(this).closest("li").next().find(".target").text()); 
}) 

Here is the JSFiddle demo

Answer 3

の.find('.target')を行う方が良いと思います現在クリックされている要素の親で、あなたのターゲット

$(document).ready(function(){ 
 
    $('.target').click(function(){ 
 
     console.log($(this).closest("li").next().find('.target').text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
     <div class="image-here"></div> 
 
     <div class="target">First description</div> 
 
    </li> 
 
    <li> 
 
    <div class="image-here"></div> 
 
     <div class="target">Second description</div> 
 
    </li> 
 
    <li> 
 
     <div class="image-here"></div> 
 
     <div class="target">Third description</div> 
 
    </li> 
 
    <li> 
 
     <div class="image-here"></div> 
 
     <div class="target">Fourth description</div> 
 
    </li> 
 
</ul>

Answer 4

をあなたが見つけること.parent()/.closest()/.parents()を使用することができます。私は、これは私が行っていたものです、代わりに.is('.target')

$(document).ready(function() { 
 
    $('.target').click(function() { 
 
    var nextParent = $(this).parent().next(); 
 

 
    if (nextParent.length) { 
 
     console.log(nextParent.find('.target').text()); 
 
    } else { 
 
     console.log('End of line'); 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div class="image-here"></div> 
 
    <div class="target">First description</div> 
 
    </li> 
 
    <li> 
 
    <div class="image-here"></div> 
 
    <div class="target">Second description</div> 
 
    </li> 
 
    <li> 
 
    <div class="image-here"></div> 
 
    <div class="target">Third description</div> 
 
    </li> 
 
    <li> 
 
    <div class="image-here"></div> 
 
    <div class="target">Fourth description</div> 
 
    </li> 
 
</ul>