为什么jQuery，每次输出相同的rel？答案

【问题标题】：Why does jQuery, outputs same rel each time?为什么jQuery，每次输出相同的rel？
【发布时间】：2012-07-17 14:11:25
【问题描述】：

所以基本上这是我的脚本：

代码 -

jQuery(document).ready(function() {
    var rel = new Array();
    var count = 0;
    jQuery(".setting").each(function() {
        rel[count] = [];
        if(jQuery("span").attr("rel")) {
            rel[count].push(jQuery("span").attr("rel"));
        }  
        console.log(count);
        count++;
    });               
    jQuery("body").text(rel);
    console.log(rel);
});

和

<div class="setting">
    <span rel="Variable">Variable</span>
    <span rel="Item">Item</span>
    <span rel="Something">Something</span>
</div>
<div>
    <span rel="Smth">Smth</span>
    <span>Sec</span>
</div>
<div class="setting">
    <span>Second</span>
    <span rel="first">First</span>
    <span rel="Third">Third</span>
</div>

我的问题，为什么会显示变量，变量？

我希望它首先显示变量，但我做不到。

基本上我想要实现的是创建新数组，在其中插入每个 div.setting 具有 rel 属性数组的跨度元素。

所以基本上在这个例子中它应该输出 -

Array (

   Array[0] => "Variable","Item","Something";

   Array[1] => "first","Third";

)

希望你明白我的意思:)

编辑：

在我的另一个示例中，我尝试首先在每个函数中添加 jQuery("span").each(function() ...，但它输出了两个带有 rel 的所有 span 元素的完整数组。我不能有不同每个 div 元素的类 / id，因为它们都将具有相同的类。

【问题讨论】：

任何理由rel 是一个数组数组，每个数组只有一个项目？
我认为您的问题的关键是 jQuery .find() 函数。这使您可以从 DOM 树中的特定点开始查找元素。
我希望所有的 SO 问题都和这个一样。

标签： javascript jquery html

【解决方案1】：

jQuery('span') 将在您的页面中查找 ALL 跨度，然后拉出第一个跨度的rel 属性。由于您没有为该跨度搜索提供上下文，因此您将始终在文档中获得相同的 #1 跨度。

【讨论】：

我应该添加 jQuery(this).children("span") 吗？这样能解决问题吗？

【解决方案2】：

你应该使用这个：

    jQuery('span',this).each(function() {
        rel[count] = [];
        if (jQuery(this).attr("rel")) {
            rel[count].push(jQuery(this).attr("rel"));
        }
        console.log(count);
        count++;
    })

而不是这个：

    rel[count] = [];
    if(jQuery("span").attr("rel")) {
        rel[count].push(jQuery("span").attr("rel"));
    }  
    console.log(count);
    count++;

http://jsfiddle.net/mblase75/JJFap/52/

诀窍是使用第二个.each 循环每个<div class="setting"> 内的所有span 标记——您的原始代码使用jQuery("span")，它只会抓取第一个span 标记每次都记录。

【讨论】：

如果您解释为什么他们应该使用一种方法而不是另一种方法，或者为什么原始方法不正确，我认为这个答案会大大改善。
难道你不能通过 $.each($(this).find('span[rel]') 摆脱 if 语句吗？还有，为什么不向他展示如何保护 jQuery 函数，这样他就不必编写可怕的代码了'jQuery` 每次 6 个字符长的语法！
@Ohgodwhy 我认为他使用jQuery 是有充分理由的。可能有许多方法可以进一步优化此代码，但为了帮助 OP 学习，我将对他的代码的更改保持在最低限度。
@Blazemonger 我认为就您的代码而言，您应该向他展示如何操作(function($){ //$ variable sanitized and safe })(jQuery);。传授知识是好事。无论如何，我还是投了赞成票。

【解决方案3】：

除了上面所说的，您还可以在使用jQuery.fn.map() 时去掉count 和一个push()，以及在将[rel] 添加到选择器时去掉if：

jQuery(document).ready(function() {
    var rel = [];
    jQuery(".setting").each(function() {
        rel.push(jQuery(this).find('span[rel]').map(function() {
            return this.getAttribute('rel');
        }).get());
    });               
    jQuery("body").text(rel);
    console.log(rel);
});

【讨论】：

【解决方案4】：

在.each() 方法中，您有几次此代码：jQuery("span").attr("rel")。该代码只是在页面上查找 ALL span 标记。当你把它放在.push() 方法中时，它只会推送集合中第一个jQuery 对象的rel 属性的值。相反，您想做类似$(this).find('span') 的事情。这将导致它查找任何span 标记，这些标记是.each() 方法正在迭代的当前.setting 元素的后代。

【讨论】：