在 jQuery 中，针对每个循环嵌套 $(this)

问题描述

我试图弄清楚，在迭代一些列表项目时，如何在嵌套的 foreach 循环中定位每个”$(this)” 等价物。这是我的问题的一个例子：

$('li').each(function(){
        // I believe $(this) would target each li item...
    $(this).children("li").each(function(){
        // ... but how can I target each of these li items? Doesn't $(this) target the original loop?
    });
});

最佳解决办法

$('li').each(function(){
    var $this = $(this);
    $this.children("li").each(function(){
        $this; // parent li
        this; // child li
    });
});

次佳解决办法

不要用 this！使用功能参数！

$('li').each(function(i, li){
    $(li).children("li").each(function(ii, li2){
        $(li)...
        $(li2)...
    });
});

这更符合本机 JavaScript 迭代器。

… 虽然<li> 不能是另一个<li> 的直接孩子

第三种解决办法

看看 jQuery 函数的基本”prototypes”(或者方法，如果你愿意的话)：

$[jQobject].[func]([callback]);

回调是在 jQ 对象的上下文中调用的函数。上下文是 this，显然。简单地说就是：

$('#foo').click(function(){});
   /                 /
   || Is the context  ||
   =====================

同样适用于您的情况，无论是否嵌套循环：

$('ul').each(function()
{
    //this is ul
    var that = this;//you'll often see code like this
    $('li', this).each(function()
    {
        //this is li
        //that is parent ul
    });
});

第四种办法

but how can I target each of these li items? Doesn’t $(this) target the original loop?

不。

this 来自您直接使用的功能。

参考文献

• Targeting $(this) within nested for each loops in jQuery

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。