【问题标题】:jQuery - equivalent to each(), but for a single elementjQuery - 等效于 each(),但用于单个元素
【发布时间】:2011-06-18 22:06:32
【问题描述】:

each() 的 jQuery 等价物是什么:

$(".element").each(function(){  
  // do stuff
});

将函数附加到单个元素时,例如 #element ?

【问题讨论】:

  • 使用 each 不起作用有什么原因吗?
  • 你真的进入它不是吗?但是你到底是什么意思?我不认为我理解这个问题。
  • 它有效,但这样使用感觉不对:)
  • 你想绑定一些鼠标事件还是什么?
  • each 应该在您需要区分元素时使用,例如您有 10 个按钮,并且在单击时要提醒单击的按钮 ID 或文本。否则,只需省略each,该函数将应用于所有元素。

标签: javascript jquery-selectors jquery


【解决方案1】:

为了直接回答您的问题,.each() 在包括 1 在内的任何大小的元素集上正常运行。

您也可以完全省略 .each() 调用,只在 $('#element') 上调用 jQuery 方法。请记住,当它们返回 jQuery 对象时,您可以链接大多数(如果不是全部)jQuery 方法调用。这甚至适用于多个元素,具体取决于方法的作用。

$('#element').doSomething().doSomethingElse();

如果需要多次引用对象,做一个变量:

var $elm = $('#element');
$elm.doSomething();
doSomethingElse($elm);

【讨论】:

    【解决方案2】:

    如果只有1个元素,可以使用选择器正常访问。

    $('#your_element').your_event(function() {
    
    });
    

    【讨论】:

      【解决方案3】:

      你的意思是像 $('#element').children().each() 假设你有一个 ul 之类的东西,它有一个 id,你希望 li 每个都在里面?

      【讨论】:

        【解决方案4】:

        使用first()

        each() 匹配所有元素,而first() 仅匹配第一个元素。

        还有其他选择器。当你在选择器中使用 id 时,你只会得到一个元素。这是.element#element 之间的主要区别。第一个是可以分配给许多元素的类,而第二个是只属于(最多)一个元素的 id。

        如果只返回一个(或 0)元素,您仍然可以使用每个元素。此外,如果您想链接一个事件,您可以完全跳过每个。当您想为元素列表中的每个元素执行特定函数时,您可以使用each

        【讨论】:

        • 谢谢!我是来找这个的。所有其他答案似乎都不必要地将函数添加到扩展方法中。
        【解决方案5】:

        您始终可以在变量中引用 jQuery 对象:

        var $el = $('#element');
        

        ...然后操纵它。

        $el.doSomething();          // call some jQuery methods from the cached object
        $el.doSomethingElse();
        

        如果您想要.each() 的原因是将DOM 元素引用为this,那么您实际上并不需要this 关键字来执行此操作,您可以简单地从jQuery 对象中获取DOM 元素。

        var element = $('#element')[0];       // both of these give you the DOM element
        var element = $('#element').get(0);   //        at index 0
        

        这两者是等价的,将检索在.each() 中将被引用为this 的DOM 元素。

        alert( element.tagName );  // alert the tagName property of the DOM element
        alert( element.id );       // alert the ID property of the DOM element
        

        我注意到,使用 each 来迭代单个元素并不一定是坏事。

        好处是您可以轻松访问 DOM 元素,并且您可以在新的范围内这样做,这样您就不会用变量将周围的命名空间弄得一团糟。

        还有其他方法可以做到这一点。举个例子:

        (function( $ ) {
        
            // Inside here, "this" will refer to the DOM element,
            //    and the "$" parameter, will reference the jQuery library.
        
            alert( this.tagName );
        
            // Any variables you create inside will not pollute the surrounding 
            //     namespace.
        
            var someVariable = 'somevalue'; // is local to this function
        
        }).call( $('#element')[0], jQuery );
        

        【讨论】:

        • $('#element')[0] != $('#element').get(0) 前者返回DOM元素,后者返回DOM元素的jQuery map对象。你可以调用$('#element').get(0).click(function...);$('#element')[0].click(function...); 是无效的。
        【解决方案6】:

        在幕后,each 只是一个for 循环,它遍历jQuery 返回的map 中的每个元素。

        本质上与:

        var i, map = $('...selector...');
        for (i = 0; i < map.length; i++)
        {
          someFunction(i, map[i]);
        }
        

        † 不仅如此,还包括在地图元素的上下文中调用函数等。

        它的实现是提供一种方便的方式来调用选择中each元素上的函数。

        【讨论】:

        • 实际上是someFunction.call(map[i], i, map[i])someFunction.apply(map[i], [ i, map[i] ])。只是为了吹毛求疵。
        • @btleffler,是的,因此“† 不止于此”。我没有使用这些特定抽象的原因是为了简洁和可读性。
        • 哈!不知道我怎么错过了那个。它一直在那里。我很抱歉。
        【解决方案7】:

        如果打算在新范围内调用(非 jQuery)函数,我认为使用“each”仍然是一种有效(并且可能是最优雅)的方式,尽管我同意,但它仍然符合 jQuery 语法亚历克斯,感觉不对,因为它可能有一些开销。 如果您可以更改语法,请使用 $('#element')[0] 替换 this(如已接受的答案中所述)。

        顺便说一句,有足够声誉的人可以更正“zzzzBov”关于已接受答案的评论吗? $('#element')[0]$('#element').get(0) ARE! 相同,如果你想要 jQuery 对象使用 $('#element').first()$('#element').eq(0)

        【讨论】:

          猜你喜欢
          • 2015-10-23
          • 2011-01-27
          • 2012-06-12
          • 2012-03-11
          • 2019-12-21
          • 1970-01-01
          • 1970-01-01
          • 2016-11-18
          • 2018-07-20
          相关资源
          最近更新 更多