在jquery中找到同一個div中的類

我想在div的相同div內找到對應於另一個class的class。在jquery中找到同一個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"); 
    }); 
});

當我點擊IMG與vote類我想修改類votenums，對應於同一個div。意思是，所需的行爲是，當圖像被點擊時，文本應該改變。

小提琴是在這裏：http://jsfiddle.net/85vMX/1/

來源

2012-02-05 whatf

你的小提琴使用** mootools **不** ** jquery ** ... – gdoron 2012-02-05 08:01:06

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

發現：

說明：獲取在當前匹配的元素集合中的每個元素的後代，由一個選擇器過濾，jQuery的對象或元素。

最接近：

說明：獲取選擇匹配開始在當前元素，並通過DOM樹前進了第一要素，。

來源

2012-02-05 07:49:20 gdoron

不起作用檢查此小提琴http://jsfiddle.net/85vMX/1/ – whatf 2012-02-05 07:54:52

@ user902620。 **該小提琴使用Mootools，而不是jquery !!! ** – gdoron 2012-02-05 07:57:36

@ user902620。檢查[this]（http://jsfiddle.net/gdoron/85vMX/4/）JSFiddle。 – gdoron 2012-02-05 07:58:34

一個簡單而可靠的方法是去備份到.party使用closest，然後再回來使用下來find：

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

，讓你改變的.party內部結構不破壞你的jQuery。

來源

2012-02-05 07:50:47

不起作用檢查這個小提琴：http://jsfiddle.net/85vMX/3/ – whatf 2012-02-05 07:58:35

@ user902620。你使用** mootools **和**而不是jquery **。看到我的JSFiddle。 – gdoron 2012-02-05 07:59:30

@ user902620：當小提琴使用jQuery時，它工作正常：http://jsfiddle.net/ambiguous/85vMX/5/ – 2012-02-05 08:02:24

除非你有充分的理由將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並不是一個好主意。 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; 
}

來源

2012-02-05 09:24:16 JFK

在jquery中找到同一個div中的類

回答

相關問題