Question

我想在同一class内找到与另一个class对应的div。

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课程的img时，我想编辑对应于同一div的课程votenums。意思是，所需的行为是，当点击图像时，文本应该改变。

小提琴在这里：http://jsfiddle.net/85vMX/1/

Answer 1

find向下搜索，.votenums不是.vote的后代，您应该遍历div，然后找到后代.votenums < / p>

$(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

查找：

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

<强>接近的：

描述：获取与选择器匹配的第一个元素，从当前元素开始并通过DOM前进树。

Answer 2

一种简单而强大的方法是使用closest返回.party，然后使用find返回：

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

这使您可以在不破坏jQuery的情况下更改.party的内部排列。

Answer 3

除非您有充分的理由将class和ID设置为img元素，否则我的建议是寻找更整洁的html代码。毕竟，在.preventDefault()标记上应用img是没有意义的，因为没有预期的事件，在这种情况下，这就是<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并不是一个好主意。 IDs应该是唯一的。

然后你最好的举动是升级到jQuery v1.7.x（如果你还没有）并使用jQuery .on()而不是.live()。你可以在jQuery网站上找到它：

从jQuery 1.7开始，不推荐使用.live()方法。使用.on()附加事件处理程序。旧版jQuery的用户应优先使用.delegate() .live()。 ...还有a good article to read here

然后你可以使用价格较低的功能，如

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

最后，css也需要一点调整

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

使用jquery在同一个div中查找一个类

3 个答案: