使用 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 事件，并尝试使用父级（“.txt”）或兄弟姐妹（“.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');

可能有用。