Посмотреть, существует ли дочерний элемент уже на другой вкладке

#jquery #html

#jquery #HTML

Вопрос:

У меня есть две вкладки:

  • На первой вкладке у меня есть фиксированный список элементов. Каждый элемент может быть добавлен на другую вкладку.
  • Вторая вкладка содержит пользовательский список элементов, происходящих из первой вкладки.
  • На второй вкладке должны быть только элементы с уникальными идентификаторами
  • Не должно быть возможности добавить один и тот же элемент из tab1 в tab2 более одного раза.

Механизм добавления и удаления работает, но проверка, выполняемая для определения того, был ли элемент уже добавлен в tab2, не работает. На данный момент я только предупредил, есть ли элемент или нет.

Если проверка выполняется в другом направлении, проверка наличия элемента в tab1, похоже, работает нормально, что кажется мне странным.

Может кто-нибудь, пожалуйста, предложить улучшения в моем коде?

РЕДАКТИРОВАТЬ: проблема в том, что выполняемая проверка всегда возвращает «Нет». Он нуждается в улучшениях, и у меня нет идей.

HTML:

 <div class="demo">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Bands</a></li>
            <li><a href="#tabs-2">My bands</a></li>
        </ul>
        <div id="tabs-1">
            <ul id="sortable1" class="bandList">

                <li id="6" class="band">
                    <div class="text">Band 1</div>
                    <div class="actions">
                        <a href="#" class="add">Add</a>
                        <a href="#" class="remove">Remove</a>
                    </div>
                </li>

            </ul>
        </div>
        <div id="tabs-2">
            <ul id="sortable2" class="bandList">

                <li id="9" class="band">
                    <div class="text">Band 2</div>
                    <div class="actions">
                        <a href="#" class="add">Add</a>
                        <a href="#" class="remove">Remove</a>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</div>
  

CSS:

 .band .actions a.add{
    background:url("../img/edit.png") no-repeat center center;
}

.band .actions a.remove{
    background:url("../img/delete.png") no-repeat center center;
}
  

jQuery:

 // Listening for a click on an add button
$('.band a.add').live('click',function(){
    var cur_id = $(this).parent().parent().attr("id");

    var tmp = ($('#sortable2').has('#'   cur_id).length ? "Yes" : "No")
    alert(tmp);

    $('#sortable2').append($('#' cur_id).clone());
});


// Listening for a click on a delete button (original)
$('.band a.remove').live('click',function(){
    var cur_id = $(this).parent().parent().attr("id");

    $('#sortable2 > li').remove('#'   cur_id);
});
  

Ответ №1:

Эта строка:

 ($('#sortable2').has('#'   cur_id).length ? "Yes" : "No");
  

всегда возвращается "No" . Если вы вернетесь length , он всегда будет возвращаться Yes . Я не мог заставить его работать has , но он возвращал правильный результат children (я думаю). Однако он будет перемещаться только на один уровень.

Комментарии:

1. Спасибо, изменение .has() на .children() устранило проблему, и все работает так, как я предполагал. Я пробовал .children(), но, возможно, это было как-то по-другому.

Ответ №2:

 if (tmp == "No") { $('#sortable2').append($('#' cur_id).clone()) }
  

Комментарии:

1. Спасибо за ваше предложение, но проблема в том, что тест всегда возвращает «Нет», что означает, что добавление всегда выполняется.