jquery - jQueryで兄弟要素のコンテンツを取得する

Question

jqueryを使用していくつかの特定の要素のコンテンツを取得する必要があります。問題は、同じ要素がページで繰り返されていることです。

<div class="content">
   <img alt="" src="">
   <p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   <p class="info">Lorem ipsum dolor...</p>
   <ul>
     <li><a class="uiButton">Test</a></li>
   </ul>
 </div>

そのため、div.contentが私のページで何度も繰り返され、ボタンを保持しているdivのコンテンツのみがクリックされたものを取得したいと思います。.uiButtonにonclickイベントを追加し、parent（ "。txt"）またはsiblings（ "。txt"）を使用しようとしましたが、機能しないようです...

$(".uiButton").click(function(){ 
  var txt = $(this).parent(".txt").text(); 
}

Answer 1

.txtは親ではなく、直接の親である必要があります (セレクターに一致する場合は、直接の親に.parent()一致します)。代わりに、次のものが必要です。

$(".uiButton").click(function(){ 
  var txt = $(this).closest("ul").siblings(".txt").text(); 
});

別の方法は、安全のために.content(経由で)までずっと移動してから、次のように下にトラバースすることです。.closest().find()

$(".uiButton").click(function(){ 
  var txt = $(this).closest(".content").find(".txt").text(); 
});

Answer 2

あなたはラッパーに行き、兄弟に行くことができますが、この場合は難しくなります。

$(".uiButton").click(function(){ 
  var txt = $(this).closest('.content').find('.txt').text(); 
}

Answer 3

$(this).closest('p.txt');

うまくいくかもしれません。