jquery .each() 循环答案

【问题标题】：jquery .each() loopjquery .each() 循环
【发布时间】：2011-10-02 00:33:22
【问题描述】：

我想阅读“.vm-video-title”-divs 中的所有链接并将它们分别发布在同一个 div 中。所以我做了这个脚本：

$('.vm-video-title').each(function(i) {//all divs
    $(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
    });

但我的问题是它会读取所有 div 的所有链接并将它们放在一个 div 中。

示例：

<div class="vm-video-title"><a href="...">Text1</a></div>
<div class="vm-video-title"><a href="...">Text2</a></div>
<div class="vm-video-title"><a href="...">Text3</a></div>

输出：

<a href="...">Text1</a>Text1Text2Text3
<a href="...">Text2</a>Text1Text2Text3
<a href="...">Text3</a>Text1Text2Text3

想要的输出：

<a href="...">Text1</a>Text1
<a href="...">Text2</a>Text2
<a href="...">Text3</a>Text3

【问题讨论】：

标签： javascript jquery loops each

【解决方案1】：

这应该为您完成这项工作，

你需要在循环（el）中找到当前元素内的div。

$('.vm-video-title').each(function(i, el) {
    el = $(el);
    el.html(el.html()+el.find("a").text());
});

在您的代码中，您将在 div 中添加所有匹配“a”标签的 text()（即 Text1Text2Text3）

【讨论】：

【解决方案2】：

你快到了。您需要在当前div 中找到a 标签并从中获取文本，而不是：$("div.vm-video-title").text()，它会在任何div 中提供带有vm-video-title 类的文本。我们将this 传递为context 用于在当前div 中选择a jQuery( selector, [context] )

$('.vm-video-title').each(function(i) {//all divs
   $(this).html($(this).html()+$("a", this).text());
});

【讨论】：

在 js 中使用“this”总是令人困惑，建议尽可能使用命名变量。函数（i，el）在这种情况下。
@patrick 的方法 (after) 更好，因为它不会重新创建 dom 元素。

【解决方案3】：

您可以直接选择<a>元素，并使用after()^[docs]方法将每个元素的内容分别附加到每个元素之后。

$("div.vm-video-title > a").after(function() { return $(this).text(); });

这不会像html()^[docs] 方法那样对现有元素进行“销毁然后重新创建”。

工作示例： http://jsfiddle.net/CCr9C/

【讨论】：

@TheVillageIdiot：谢谢。 :o)