Работа функции each и detach?

Question

[Владимир Голубь]

К примеру есть вот такой вот список на странице.

<li>Soup Du Jour
                        <ul class="menu_list">
                            <li class="meat">grilled steak</li>
                            <li>mushrooms</li>
                            <li>seasonal vegetables</li>
                            <li>vegetable broth </li>
                        </ul>
                    </li>
                    <li>Hot and Sour Soup
                        <ul class="menu_list">
                            <li class="meat">roasted pork</li>
                            <li>carrots</li>
                            <li>Chinese mushrooms</li>
                            <li>chili</li>
                            <li>vegetable Broth </li>
                        </ul>
                    </li>
                    <li>Stuffed Baked Potato
                        <ul class="menu_list">
                            <li>potato</li>
                            <li class="meat">charbroiled or blackened chicken</li>
                            <li>seasonal veggies</li>
                            <li>cheddar &amp; jack cheese</li>
                            <li>creamy alfredo sauce</li>
                        </ul>
                    </li>

На странице есть две кнопки. По щелчку на одну я: Вставляю строки и удаляю и запомининаю( как то так )

$('.meat').after('<li class="tofu"><em>Tofu</em></li>');
$m = $('.meat').detach();

По щелчку на другую: делаю обратный маневр

$('.tofu').each(function(i){
                $(this).after($m[i]);
$('.tofu').remove();

Все работает правильно. Но вот вопрос каким образом интерпретатор понимает в какой menu_list вставлять ?

Почему он к примеру не вставляет все в один, а вставляет в разные ?

Answer 1

[Ivan-P]

Первый код:
$('.meat') создает масив;
.after('<li class="tofu"><em>Tofu</em></li>') добавляет присле каждого элемента масива пункт меню Tofu.
$m = $('.meat').detach(); - заносите масив в переменную, и отключаете от DOM.

Второй код:
Так как элементы<li class="meat"> разные, то используется .each(function(i){$(this).after($m[i]);, где каждому tofu[0] подставляется свой meat[0], tofu[1] - meat[1] и так далее.

Comments

[Владимир Голубь]

Вот только во втором коде не понятно почему tofu вдруг стал массивом ? $('.tofu').each(function(i) ведь тут не массив вроде ?

[Ivan-P]

$('.tofu') такой же масив, как и $('.meat'). Но на первом участке .each() не нужен так как к каждому элементу с классом "meat" добавляете li с одинаковым содержанием. А во втором - случае содержание добавляемых элементов разное, по этому и применячется метод .each(), который к кажтому элементу с классом 'tofu' в применяет функцию смотрящую какой 'meat' добавить.

[Владимир Голубь]

спасибо

Answer 2

[Назар Мокринский]

Оно как-то слишком криво у вас написано, и если работает правильно - то это совпадение.
$('.meat') выберет все три, но судя по тому что вы кликаете вам нужно что-то одно.

Comments

[Владимир Голубь]

Мне все 3 и нужно. Вот у меня вопрос каким образом each вставляет в .tofu именно 1 элемент, а не сразу все 3 ? Это пример из книги по jQuery

[Владимир Голубь]

Получаеться мне нужно заменить все элементы класса .meat на класс .tofu , а по нажатию кнопки наоборот. И мне не понятна работа цикла.