jquery - 检查 div 是否存在于列表项中并根据它所在的列表隐藏或显示 - jquery

Question

我正在使用 JQUERYUI，并且我有以下 2 个带有列表项的列表。默认情况下，第一个列表包含所有项目，并且这些列表项目中的所有 div 都是隐藏的。当我将此列表中的项目移动到第二个列表时，我想在列表项中显示这些 div（但仅针对该特定列表项）。当我将它从第二个列表移回原始列表时，我想再次隐藏该项目的所有 div。我不确定如何根据每个项目隐藏这些 div。任何帮助将非常感激。我原来的清单是：

<ul id="all-colls-list" class="droptrue">
                    <li class="sortedli">
                        Item 0
                                <div class="sel-total-on">&nbsp;</div>
                                <div class="sel-group-off">&nbsp;</div>
                                <div class="sel-sort-on">&nbsp;</div> 
                                <div class="sel-display-on">&nbsp;</div>
            </li>
    <li class="sortedli">
                        Item 1
                                <div class="sel-total-on">&nbsp;</div>
                                <div class="sel-group-off">&nbsp;</div>
                                <div class="sel-sort-on">&nbsp;</div> 
                                <div class="sel-display-on">&nbsp;</div>
            </li>
                    <li class="sortedli">
                        Item 3
                                <div class="sel-total-on">&nbsp;</div>
                                <div class="sel-group-off">&nbsp;</div>
                                <div class="sel-sort-on">&nbsp;</div> 
                                <div class="sel-display-on">&nbsp;</div>
            </li>
    </ul>

第二个清单是：

 <ul id="coll-selected-list" class="droptrue sort-drop" style="width:400px;">
</ul>

接收第二个列表 - 显示 div

receive: function (event, ui) {
 // Show the divs
$(ui.item).not(':has(.sel-total-on)').show();
}

接收第一个列表 - 隐藏 div

receive: function (event, ui) {
 // Hide the divs
$(ui.item).not(':has(.sel-total-on)').hide();
}

Answer 1

当您从第一个列表移动到第二个列表时，只需将 div 的类从“隐藏”更改为“不隐藏”，反之亦然

如果您还没有，请在 css 中定义类，如下所示。请检查：您可能已经有一些具有此属性的 css 类，在这种情况下您不需要定义

.divhide{
   display:none
} 

当从第二个列表移动到第一个时，添加 .divhide 类并在从第一个移动到第二个时删除。

$("div.myClass").addClass('.divhide');
$("div.myClass").removeClass('.divhide');