jQuery code is hiding all content inside my div

Question

I have the following code:

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');
  });
});

The idea is, when i click a button that contains the class "layers-builder", all divs in "available-widgets-list" that DO NOT contain the class "layers-widget" are hidden.

The problem I'm facing is that using this code also hides all the divs inside "layers-widget" (as not all of them have "layers-widget" in the id.

for example, here is a mockup markup:

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

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

In the above example, the first div "some-id" would be hidden, along with all the child divs inside "this-layers-widget-89"

How can I make it so that all the content within the div containing "layers-widget" still shows?

Answer 1

“>”运算符指定div必须是#available-widgets-list的直接子代：

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

Answer 2

You should add a class instead of relying on finding parts of some-id but this will work also work: $('[id*="some-id"]') ;

You should also be using jquery's built in hide() method instead of css('display', 'none') . They do literally the exact same thing but using the built in methods is more readable.