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.html()，它只会获取集合中第一个元素的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 2

替换

        $.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的一次更改（通常是昂贵的操作）：

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

Answer 3

当有疑问时，事情变得简单。您可以在不需要jQuery $ .each语句的情况下执行此操作。我不是100％，但我认为它的使用不正确。

而不是$ .each尝试这个

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

如何从jQuery选择器的集合中提取数据？

4 个答案: