如何隐藏具有特定属性集的所有元素？

Question

我有一系列项目通过来自 php 文档的 ajax 请求插入到我的 html 文档中。返回的数据由一堆设置了自定义属性的 div 元素组成，这样我就可以知道哪些 div 元素属于已返回的项目类别。我希望能够单击类别名称并隐藏所有具有自定义属性（设置为类别名称）的元素。

样品返回

<div class="row">
   <div class="category" categoryID="category_1">
      category_1
      <div categoryID="category_1">item 1</div>
      <div categoryID="category_1">item 2</div>
      <div categoryID="category_1">item 3</div>
   </div>
   <div class="category" categoryID="category_2">
      category_2
      <div categoryID="category_2">item 1</div>
      <div categoryID="category_2">item 2</div>
      <div categoryID="category_2">item 3</div>
   </div>
   <div class="category" categoryID="category_3">
      category_3
      <div categoryID="category_3">item 1</div>
      <div categoryID="category_3">item 2</div>
      <div categoryID="category_3">item 3</div>
   </div>
</div>

<div class="row">
   <div class="category" categoryID="category_1">
      category_1
      <div categoryID="category_1">item 1</div>
      <div categoryID="category_1">item 2</div>
      <div categoryID="category_1">item 3</div>
   </div>
   <div class="category" categoryID="category_2">
      category_2
      <div categoryID="category_2">item 1</div>
      <div categoryID="category_2">item 2</div>
      <div categoryID="category_2">item 3</div>
   </div>
   <div class="category" categoryID="category_3">
      category_3
      <div categoryID="category_3">item 1</div>
      <div categoryID="category_3">item 2</div>
      <div categoryID="category_3">item 3</div>
   </div>
</div>

我正在使用 jquery 来处理大部分 javascript 函数，因此在处理动态添加到 dom 的数据时，我自然会使用如下代码。

$(".skillCategory").live({
        mouseenter:
           function(){
               $(this).css('background-color', 'white');
           },
        mouseleave:
           function(){
               $(this).css('background-color', '#393939');
           }
       });
    $(".skillCategory").live('click',function(){
        var title = $(".skillCategory").attr("categoryID");

        });
});

我试图能够隐藏一个类别以及属于它的所有项目，由“categoryID”属性确定。

感谢您的时间和帮助。

Answer 1

您可以格式化您的 HTML 以使用新的“数据属性”表示法：

<div class="category" data-categoryID="category_3">

那么你可以这样做：

$(".category").click(function() {
  var ctx = $(this);
  $(".category").each(function(item) {
    if($(this).data("categoryID") != ctx.data("categoryID") {
      $(this).hide();
    }
  });
});

Answer 2

这会为你做的：

http://jsfiddle.net/J6PRM/

希望对你有帮助。

Answer 3

如果我正确理解你的问题，这样的事情应该可以工作：

$(".category").live('click',function(){
       var category = $(this).attr("categoryID");
       $("[categoryID=" + category + "]").not('.category').hide();
    });

Answer 4

尝试使用 jquery 属性选择器：http://api.jquery.com/attribute-equals-selector/

您应该将其与其他内容结合使用以避免隐藏主 div，例如 ":not(.skillCategory)" 或类似内容。