如何使用jQuery選擇器來定位這些元素？

我想知道如何編寫一個jQuery選擇器來選擇下面的每個「輸入」項目。我不想一次選擇它們。這些輸入框不會有名稱或ID。我可能必須使用某種兒童符號，但我不知道如何去做。如何使用jQuery選擇器來定位這些元素？

<div id="partdiv"> 
    <div class="floater"> 
    <input type="text"/> // Some input box with no id or name 
    </div> 
    <div id="descriptiondiv"> 
    <div class="floater"> 
     <input type="text"/> // Some input box with no id or name 
    </div> 
    <div id="positiondiv"> 
     <div class="floater"> 
     <input type="text"/> // Some input box with no id or name 
     </div> 
    </div> 
    </div> 
</div>

對於第一個，比如，我想：

$("#partdiv > input").bind(....

，但沒有奏效。

來源

2011-11-17 AKWF

你打算跟他們做什麼？ – roselan

有很多不同的方法來做到這一點 - 每個方法都有不同的折衷。您可以使用這些選擇：

"#partDiv input:first" 
"#descriptiondiv input:first" 
"#positiondiv input"

或者這些：

"#partDiv input:eq(0)" 
"#partDiv input:eq(1)" 
"#partDiv input:eq(2)"

或者這些：

"#partDiv > .floater > input" 
"#descriptiondiv > .floater > input" 
"#positiondiv > .floater > input"

注意，認爲「正確」的方式做到這將是給每個輸入它是自己的ID或放在一個有id的容器（在同一容器中沒有其他輸入標籤）。既然這些都不是真的，你必須使用位置或層次信息來辨別哪個輸入是哪個。

要使用這些不同方法中的哪一種取決於您希望確切的HTML結構和選擇器之間的關係有多緊密或鬆散（例如，選擇器是否仍然適用於某些類型的HTML更改）。

第一個選項的優點是它不關心div和輸入之間有多少級別/層次的標記，只是您要在每個div中選擇第一個輸入元素。第三個選項將選擇器綁定到非常特定的HTML實現，並且如果您在partDiv和輸入之間放置了一個額外的div，它將停止工作。如果你這樣做，第一個不會停止工作，所以第一個和第二個比第三個脆弱得多。

第二個選項的優點是它完全獨立於partDiv內部的標記。它唯一關心的是該div中的第一，第二和第三個輸入字段。

第三個選項的主要優點是，您可以重新排列三個輸入字段的順序，只要您保持選擇器中指定的層次結構的唯一性，選擇器仍然可以工作。

來源

2011-11-17 01:25:31 jfriend00

這是否幫助：

 
$("#partDiv > input").live("click", function() { 
    alert($(this).val()); 
});

來源

2011-11-17 01:24:32

$('input').bind('...

每個輸入將被綁定到你想要的事件（點擊，變更，等等）。

當你在事件函數中時，「this」對應於發生事件的那個輸入。（即一個點擊），

或者你可以使用$('input').click(...，或$('input').change(...

，但我請你閱讀文檔上.on()，事件粘合劑團結他們。

來源

2011-11-17 01:24:46 roselan

"#partdiv > input"不起作用，因爲您只選擇了'#partdiv'的直接子元素'>'。

這些會做

1st input: $("#partdiv>.floater>input") 
2nd input: $("#descriptiondiv>.floater>input") 
3rd input: $("#positiondiv>.floater>input")

我注意到你的div被包裹在一個奇怪的方式，就是你真正的意思？

來源

2011-11-17 01:24:59

夥計們，我想OP說：「我不想一次選中它們」。 –

$("#partdiv > input")說要選擇一個輸入，它是ID爲partdiv的元素的直接子元素。要在元素partdiv下的任何地方找到輸入，您可以使用$("#partdiv input")。但是，由於它們全都從#partdiv下降，所以它會立即獲得所有輸入。所以，你需要進一步打破它：

$('#partdiv .floater input') //gets an input which lives under element with class floater which itself lives under element with ID partdiv

等..

注意，有很多很多方法對皮膚這隻貓。

來源

2011-11-17 01:26:26 JAAulde

如何使用jQuery選擇器來定位這些元素？

回答

相關問題