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

我的想法是，当我点击一个包含类＆＃34; layers-builder＆＃34;的按钮时，所有div都在＆＃34; available-widgets-list＆＃34;不包含类＆＃34; layers-widget＆＃34;是隐藏的。

我面临的问题是，使用此代码还会隐藏＆＃34; layers-widget＆＃34;中的所有div。（因为并非所有人都有＆＃34;图层小部件＆＃34;在id。

例如，这是一个模型标记：

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

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

在上面的例子中，第一个div＆＃34; some-id＆＃34;将被隐藏，以及所有子div内部＆＃34; this-layers-widget-89＆＃34;

我怎样才能使div中的所有内容包含＆＃34; layers-widget＆＃34;仍然显示？

Answer 1

＆＃34;＆gt;＆＃34;运算符指定div必须是#available-widgets-list的直接子项：

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

Answer 2

您应该添加一个类，而不是依赖于查找some-id的部分内容，但这也可以正常工作：$('[id*="some-id"]');

您还应该使用hide()方法内置的jquery而不是css('display', 'none')。它们确实完全相同，但使用内置方法更具可读性。

jQuery代码隐藏了我div中的所有内容

2 个答案: