使用jQuery在同一div中查找类

Question

我希望能够在同一个

标签内找到与另一个标签相对应的标签。

HTML结构：

<div class="main">
  <div class="party">
                <a href="#"><img id="1001" class="vote" src="http://img2.jpg"></a>
                <p class="votenums"> 20 votes.</p>
  </div>

   <div class="party">
                <a href="#"><img id="1001" class="vote" src="http://imgtwo2.jpg"></a>
                <p class="votenums"> 30 votes.</p>
  </div>

jQuery代码如下：

$(function() {
    $(".vote").live("click", function(e) {
        e.preventDefault();
        $(this).find(".votenums").text("changed text");
    });
});

当我点击类名为vote的图片时，我想编辑相应的

中的类名votenums。也就是说，期望的行为是，当图片被点击时，文本应该改变。

示例代码在这里：http://jsfiddle.net/85vMX/1/。

- whatf

---

你的小提琴使用的是 mootools 而非 jquery... - gdoron

Answer 1

find 方法是往下查找，但是 .votenums 并非 .vote 的后代元素，因此你需要向上遍历到 div 元素，然后再查找其后代元素 .votenums

$(function() {
    $(".vote").live("click", function(e) {
        e.preventDefault();
        $(this).closest('div').find(".votenums").text("changed text");
    });
});

如果你要寻找的div始终具有class=party，则可以通过以下方式进行搜索：
$(this).closest('.party').find(".votenums").text("changed text");
类选择器比元素选择器更好

JSFiddle DEMO

find:

描述：获取当前匹配元素集合中每个元素的后代，由选择器、jQuery对象或元素进行过滤。

closest:

描述：从当前元素开始向上遍历DOM树，获取与选择器匹配的第一个元素。

- gdoron is supporting Monica

---

@user902620。class选择器更高效。 - gdoron

Answer 2

一个简单而强大的方法是通过closest返回到.party，然后再使用find继续前进：

$(".vote").live("click", function(e) {
    e.preventDefault();
    $(this).closest('.party').find('.votenums').text("changed text");
});

这使您可以更改.party的内部排列，而不会破坏您的jQuery。

- mu is too short

---

@user902620，你使用了 mootools 而不是 jQuery。请看我的 JSFiddle。 - gdoron

@user902620：如果fiddle使用jQuery，它可以正常工作：http://jsfiddle.net/ambiguous/85vMX/5/。 - mu is too short

Answer 3

除非您有充分的理由将class和ID设置为img元素，否则我的建议是选择更整洁的html代码。毕竟，在img标签上应用.preventDefault()没有意义，因为不会触发任何事件，在这种情况下，应该使用<a>标签：

<div class="main">
 <div class="party">
  <a id="1001" class="vote" href="#"><img src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg"></a>
  <p class="votenums"> 20 votes.</p>
 </div>
 <div class="party">
  <a id="1002" class="vote" href="#"><img src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg"></a>
  <p class="votenums"> 30 votes.</p>
 </div>
</div>

请注意，我为上面的每个链接设置了不同的ID，因为在同一文档中使用相同的ID不是一个好主意。 ID应该是唯一的。

然后，您最好升级到jQuery v1.7.x（如果尚未升级），并使用jQuery {{link1：.on()}}而不是.live()。 您可以在jQuery网站上找到此内容：

从jQuery 1.7开始，.live()方法已被弃用。使用.on()来附加事件处理程序。使用旧版本jQuery的用户应优先使用.delegate()而不是.live()。 ... 这里还有一篇好文章可供阅读

然后，您可以使用一个更少消耗资源的函数

$(function() {
 $(".vote").on("click", function(e) {
 e.preventDefault();
 $(this).next('.votenums').text("changed text");
 });
});

最后，CSS 也需要进行一些微调。

.vote img{
    height:70px;
    width:70px;   
}

- JFK