2011-12-28 42 views
11

我有以下標記:充分利用點擊的元素最接近的輸入值與jQuery

<div class="options"> 
    <div class="quantity"> 
    <label>Qty:</label> 
    <input type="text" name="quantity" value="1"/> 
    </div> 
    <div class="buttons"> 
    <a href="#" class="add">Add Item</a> 
    </div> 
</div> 

我必須綁定到使用jQuery的「添加」一流的單擊事件。當我點擊時,我想獲得name =「quantity」的值,但有幾個地方點擊了「添加」,並且有幾個數量字段。

我試圖得到'最接近'的輸入值。我試過用'最接近'和'findall',但沒有運氣。

任何想法如何我可以得到這個使用jQuery?謝謝!

+1

我從來沒有聽說過一個jQuery方法'findall'。我建議你通過[遍歷方法](http://api.jquery.com/category/traversing/)並查看它們。 「最接近」已經是一個好的開始。請發佈迄今爲止的代碼。 – 2011-12-28 19:24:29

回答

26
$(".add").on("click", function() { 
    var val = $(this).closest("div.options").find("input[name='quantity']").val(); 
}); 

的戰略位置是:

  • 使用closest找到最近的祖先給定的選擇匹配(在這種情況下divoption類)
  • 然後使用find找到input與給定的name使用attribute equals selector
  • 最後,使用val來檢索input的值。
3

您需要使用closest找到正確的封閉元素,然後從那裏開始工作。

$(link).closest(".options").find("input[name=quantity]") 
0
$(this).parent().parent().find("input[name=quantity]").val() 

這應該做的伎倆

+1

這是行不通的。 '$(this).parent()'將是'div.buttons'。 – 2011-12-28 19:25:07

+0

好現貨我的壞我仍然建議使用最接近但是編輯我的答案任何方式的正確性 – 2011-12-28 19:26:37

0

我想最近的作品只與同級別的元素。所以..

爲什麼不把id放到輸入字段並通過$('#input-id')來選擇?

或者穿越長達類選項,並在那裏找到輸入:$(this).parents('.options:first').find('input');

+0

'最接近'找到最匹配的選擇器的DOM祖先。 '父母'發現與選擇器匹配的所有祖先。 – 2011-12-28 19:26:45

+0

剛剛修復,addad:第一。那麼最近的作品會向上搜索嗎?再聰明一點.. :) – Kristian 2011-12-28 19:28:02