獲取所有輸入值時的問題

Question

我進入jquery的速度非常快，我有trobule.I試圖獲取所有輸入值並提醒他們。但我只獲得第一個輸入。還需要放置跨度，因爲輸入應該是draggable.Where我米所作所爲。希望你會回答它

<label>Paragraph</label> 
<span class="blue"> 
<div id="page"></div> 
</span> 
<script> 
$("label").click(function(){ 
$("#page").append('<span class="blue"><input type="text" /></input></div></span>'); 
$(".blue").draggable(); 
$("#page").droppable(); 
}); 
$("#page").dblclick(function(){ 
var panel= $("#page .blue"); 
var inputs = panel.find("input"); 
alert(inputs.val()); 
}); 
</script> 

或其他樣式

<p></p> 
<label>Paragraph</label> 
<span class="blue"> 
<div id="page"></div> 
</span> 
<script> 
$("label").click(function(){ 
$("#page").append('<span class="blue"><input type="text" /></input></div></span>'); 
$(".blue").draggable(); 
$("#page").droppable(); 
}); 
$("#page").dblclick(function(){ 
alert($("#page input").val()); 
}); 
</script> 

Answer 1

像尼克拉斯說，你要在這裏使用each()。下面是一個例子，基於關閉的原密碼：

$("label").click(function() { 
    $("#page").append('<div><input type="text" value="foo" class="fooBox" /></div>'); 
}); 

$("#page").dblclick(function(){ 
    $('.fooBox').each(function() { 
     alert($(this).val()); 
    }); 
}); 

Here is a jsFiddle在那裏你可以嘗試一下。

Answer 2

使用.each()遍歷每個輸入。就像這樣：

var inputs = panel.find("input"); 
$(inputs).each(function(i,e){ 
    alert($(e).val()); 
}); 

Answer 3

根據你以前的文章加上這篇文章，你似乎對jQuery選擇器的工作原理有一個誤解。

alert($("#page input").val());將無法​​正常工作，因爲$("#page input")返回每個屬於page元素內的input元素的集合。

您可以調用一些適用於集合中每個項目的操作。如$("div.page").css('background-color','red'); - 這將爲每個div應用一個紅色背景顏色，並且類別爲page，而不需要單獨對它們進行迭代。

但有一些操作不能應用於集合，只會選擇集合中的最後一個（或第一個，我不記得哪個）項目。例如，您正在嘗試執行的操作：alert($("#page input").val());只會提醒一個值。因爲.val()只能應用於一個單一元素。不是一個完整的集合。所以，如果您在整個系列中調用它，它只會爲其中一個返回.val()。爲了提醒每個值，您需要遍歷集合。