Почему в цикле не отлавливает дочерние элементы?

Question

[Павел]

$('.item').each(function () {
        // это работает
        if ($(this).children('.item').length) {
            // этот код уже не работает
        }
    });

<ul>
<li>
        <div class="item">
            <form action="#" class="baseeidtform">
                <span class="editBtn" title="Редактировать"><i class="glyphicon glyphicon-pencil"></i></span><span class="deleteBtn" title="Удалить"><i class="glyphicon glyphicon-trash"></i></span><input class="baseinput" disabled="" data-edit="40" type="text" value="dfgdfg "><span class="saveBtn dn" title="Сохранить"><i class="glyphicon glyphicon-ok"></i></span><span class="closeBtn dn" title="Отменить"><i class="glyphicon glyphicon-remove"></i></span>
            </form>
        </div>
        <ul>
            <li>
                <div class="item">
                    <form action="#" class="baseeidtform">
                        <span class="editBtn" title="Редактировать"><i class="glyphicon glyphicon-pencil"></i></span><span class="deleteBtn" title="Удалить"><i class="glyphicon glyphicon-trash"></i></span><input class="baseinput" disabled="" data-edit="85" type="text" value="fghfghj "><span class="saveBtn dn" title="Сохранить"><i class="glyphicon glyphicon-ok"></i></span><span class="closeBtn dn" title="Отменить"><i class="glyphicon glyphicon-remove"></i></span>
                    </form>
                </div>
                <ul>
                    <li>
                        <div class="item">
                            <form action="#" class="baseeidtform">
                                <span class="editBtn" title="Редактировать"><i class="glyphicon glyphicon-pencil"></i></span><span class="deleteBtn" title="Удалить"><i class="glyphicon glyphicon-trash"></i></span><input class="baseinput" disabled="" data-edit="99" type="text" value="БНС "><span class="saveBtn dn" title="Сохранить"><i class="glyphicon glyphicon-ok"></i></span><span class="closeBtn dn" title="Отменить"><i class="glyphicon glyphicon-remove"></i></span>
                            </form>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="item">
                    <form action="#" class="baseeidtform">
                        <span class="editBtn" title="Редактировать"><i class="glyphicon glyphicon-pencil"></i></span><span class="deleteBtn" title="Удалить"><i class="glyphicon glyphicon-trash"></i></span><input class="baseinput" disabled="" data-edit="118" type="text" value="dfgdfgdfg"><span class="saveBtn dn" title="Сохранить"><i class="glyphicon glyphicon-ok"></i></span><span class="closeBtn dn" title="Отменить"><i class="glyphicon glyphicon-remove"></i></span>
                    </form>
                </div>
                <ul>
                    <li>
                        <div class="item">
                            <form action="#" class="baseeidtform">
                                <span class="editBtn" title="Редактировать"><i class="glyphicon glyphicon-pencil"></i></span><span class="deleteBtn" title="Удалить"><i class="glyphicon glyphicon-trash"></i></span><input class="baseinput" disabled="" data-edit="119" type="text" value="dfgdfh  "><span class="saveBtn dn" title="Сохранить"><i class="glyphicon glyphicon-ok"></i></span><span class="closeBtn dn" title="Отменить"><i class="glyphicon glyphicon-remove"></i></span>
                            </form>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="item">
                    <form action="#" class="baseeidtform">
                        <span class="editBtn" title="Редактировать"><i class="glyphicon glyphicon-pencil"></i></span><span class="deleteBtn" title="Удалить"><i class="glyphicon glyphicon-trash"></i></span><input class="baseinput" disabled="" data-edit="120" type="text" value="237/21 "><span class="saveBtn dn" title="Сохранить"><i class="glyphicon glyphicon-ok"></i></span><span class="closeBtn dn" title="Отменить"><i class="glyphicon glyphicon-remove"></i></span>
                    </form>
                </div>
                <ul>
                    <li>
                        <div class="item">
                            <form action="#" class="baseeidtform">
                                <span class="editBtn" title="Редактировать"><i class="glyphicon glyphicon-pencil"></i></span><span class="deleteBtn" title="Удалить"><i class="glyphicon glyphicon-trash"></i></span><input class="baseinput" disabled="" data-edit="121" type="text" value="sdgfdkfguhdkfgujh"><span class="saveBtn dn" title="Сохранить"><i class="glyphicon glyphicon-ok"></i></span><span class="closeBtn dn" title="Отменить"><i class="glyphicon glyphicon-remove"></i></span>
                            </form>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

почему не ловит все дочерние элементы в if ?

Answer 1

[Andrew]

Потому что там 0

$('.item').each(function () {
        // это работает
        if ($(this).children('.item').length) {
            // этот код уже не работает
        }
    });

Проверяйте console.log(); если не знаете что выводит. У .item нет потомка .item

Comments

[Павел]

а как поймать все потомки в таком случае? Мне надо в потомках сделать действие с ними
если потомки есть то скрыть внутри них кое что или добавить класс или что нибудь...

[Andrew]

Павел,

$('.item').children().each(function () {
  console.log($(this).hide());
    });

[Павел]

Andrew, скрыло все .item на странице , вне зависимости от того в какой иерархии они расположены

я немного упростил код чтоб понятно было что я пытаюсь сделать

<ul>
    <li>
        <div class="item">
            <span class="deleteBtn" title="Удалить"></span> <!-- эту скрыть -->
        </div>
        <ul>
            <li>
                <div class="item">
                    <span class="deleteBtn" title="Удалить"></span> <!-- эту скрыть -->
                </div>
                <ul>
                    <li>
                        <div class="item">
                            <span class="deleteBtn" title="Удалить"></span>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="item">
                    <span class="deleteBtn" title="Удалить"></span> <!-- эту скрыть -->
                </div>
                <ul>
                    <li>
                        <span class="deleteBtn" title="Удалить"></span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

я и сам запутался немного , выходит надо если у родителя есть потомки , у родителя скрыть элемент

[Andrew]

Павел, так я вам для примера написал, чтобы все скрыло, вы там проверяйте и делаете, в цикле, что хотите.
Если вы знаете что там span всегда можете просто написать
$('.item>span').hide();
Для чего вы бегаете по всем? вы можете и в css это сделать

.item>span{
display: none;
}

[Павел]

Andrew, дело в том что надо скрывать только если есть дочерний элемент , а когда дочернего нет отображать

[Павел]

я вот наглядно сделал
https://jsfiddle.net/KLON/2z7xpqrt/9/
в категория 1.1.1 и категория 2.1.1 тоже должно быть видно del