Таргетирование $(this) внутри вложенных для каждого цикла в jQuery

Я пытаюсь выяснить, когда повторяется через некоторые элементы списка, как настроить каждый эквивалент "$ (this)" в вложенных петлях foreach. Вот пример моей проблемы:

$('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?
    });
});

Ответ 1

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

Ответ 2

Не используйте this! Используйте функциональные параметры!

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

Это больше соответствует языковым итераторам JavaScript.

... хотя <li> не может быть прямым потомком другого <li>

Ответ 3

Посмотрите на основные "прототипы" функций jQuery (или методов, если хотите):

$[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
    });
});

Ответ 4

но как я могу настроить таргетинг на каждый из этих элементов? Не нацеливает ли $(this) исходный цикл?

Неа.

this происходит от функции, в которой вы находитесь.

Ответ 5

Нет, this относится к каждому из дочерних элементов <li>. Попробуйте.

Большинство (если не все) DOM-взаимодействующих обратных вызовов jQuery устанавливают this в элемент DOM, с которым вы работаете.

Вы также можете написать:

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