如何從jQuery選擇器中提取集合中的數據？

Question

只是一個小例子。我有3個環節，一個按鈕和一個div：

<a href="#">AAA</a> 
<a href="#">BBB</a> 
<a href="#">CCC</a> 
<button id="getResult">Get result</button> 
<div id="result"></div> 

現在，按下按鈕時，我想從3個環節獲取文本，並將其插入到結果DIV。這裏是我的代碼：

<script type="text/javascript"> 
    $(function() { 
     $('#getResult').click(function() { 
      var links = $('a'); 
      $.each(links, function() { 
       $('#result').append('<p>' + links.html() + '</p>'); 
      }); 
     }); // end click 
    }); // end ready 
</script> 

我希望得到的結果將是

AAA 
BBB 
CCC 

但它是

AAA 
AAA 
AAA 

有誰知道爲什麼和如何解決這一問題？如果你有更好的方法來做到這一點，你能告訴我嗎？我對jQuery非常陌生。感謝您的幫助。

Answer 1

更換

 $.each(links, function() { 
      $('#result').append('<p>' + links.html() + '</p>'); 

與

 links.each(function() { 
      $('#result').append('<p>' + $(this).html() + '</p>'); 

或者乾脆

$('a').each(function() { 
    $('#result').append('<p>' + $(this).html() + '</p>'); 
}); 

你沒有使用迭代的項目，你應該使用.each而不是$.each遍歷一個jQuery採集。

另一個更直接的解決方案，從而在DOM只有一個變化（這通常是昂貴的opearion）會是這樣：

$('#result').html(
    $('a').map(function(){return '<p>'+this.innerHTML+'</p>'}).get().join('') 
); 

Answer 2

裏面你打電話links.html()您.each功能，只得到了的HTML集合中的第一個元素。你的意思是使用$(this).html()（可能）。

http://jsfiddle.net/ExplosionPIlls/xZymh/

順便說一句，你可以重寫這個只使用.html方法本身做追加：

$("a").html(function (_, html) { 
    $("#result").append("<p>" + html + "</p>"); 
}); 

http://jsfiddle.net/ExplosionPIlls/xZymh/1/

Answer 3

有疑問時讓事情簡單。你可以做到這一點，而不需要jQuery $ .each語句。林不是100％，但我認爲它被反正使用不正確。

而不是$。每試試這個

for (var i = 0; i < links.length; i++){ 
    var linkHtml = links[i].html(); 
    $('#result').append('<p>' + linksHtml + '</p>'); 
} 

希望幫助

Answer 4

試試這個，你需要遍歷的鏈接，以便使用links.each看到小提琴這裏http://jsfiddle.net/raQtf/

$(function() { 
     $('#getResult').click(function() { 
      var links = $('a'); 
      links.each(function(){ 
       $('#result').append('<p>' + $(this).html() + '</p>'); 
      }); 

     }); // end click 
    }); // end ready