2016-06-23 7 views
0

このように多くの質問がありましたが、解決策を見つけることができませんでした。子要素から次の子要素をプレビューします。

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>

+0

'$(この).parentを見つけるために、次の要素と.find()を見つける()。次の()は、'あなたは何手の込んだことができ、親 'li'の兄弟を指します必要? – Satpal

+0

子要素から次の子要素を検索したい –

答えて

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

+0

あなたは正しいですが、私はその条件が必要です。それを行う方法はありますか? –

+0

条件は?ごめんなさい少しわかりました私はより多くの情報が必要です..あなたはどんな条件をお望みですか? – guradio

+0

私はもっと説明します、このフィドルを見てください:http://jsfiddle.net/zQUhV/47/。私はスニペットで説明したような別のコード構造と、フィドルのようなパラグラフを持っています。しかし、私は自分のコード構造を置くと、私はnext要素とprev要素を見つけることができません。 –

1

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

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

Here is the JSFiddle demo

+0

@guradio回答の説明ははっきりとは異なります。 – Justinas

+0

私はその条件が必要です、私は右の次のターゲットがあるかどうかチェックしたいと思います。 –

+0

@TeutaKoraqi更新を確認してください。 'nextParent.length> 0' – Justinas

1

.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>

1

をあなたが見つけること.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>

関連する問題