JQuery код скрывает все содержимое внутри моего DIV

Question

У меня есть следующий код:

jQuery(document).ready(function($) { 
    $("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() { 
    $("#available-widgets-list div:not([id*='layers-widget'])").css('display','none'); 
    }); 
}); 

Идея заключается в том, когда я нажимаю кнопку, которая содержит класс «слои-строитель», все дивы в «имеющихся в наличии widgets-list ", которые НЕ содержат класс" widgets-widget ", скрыты.

Проблема я столкнулся в том, что с помощью этого кода также скрывает все дивы внутри «слои-виджета» (так как не все из них имеют «слои-виджет» в ид.

, например, здесь это макет разметки:

<div id="some-id"> 
... 
</div> 

<div id="this-layers-widget-89"> 
    <div id="hello"></div> 
    <div id="yes"></div> 
</div> 

В приведенном выше примере, первый ДИВ «некоторые-идентификатор» будет скрыт, вместе со всеми детьми дивы внутри «это-слои-виджет-89»

Как могу ли я сделать так, чтобы все содержимое в div, содержащем «layer-widget», все еще отображается?

Answer 1

">" оператор указывает, что div должен быть прямым потомком #available-widgets-list:

$("#available-widgets-list > div:not([id*='layers-widget'])").css('display','none'); 

Answer 2

Вы должны добавить класс вместо того, чтобы полагаться на поиск частей some-id, но это будет работать также: $('[id*="some-id"]');

Вы также должны использовать jquery's встроенный метод hide() вместо css('display', 'none'). Они делают буквально то же самое, но использование встроенных методов более читаемо.