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

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

如果我正确理解你的问题，这样的事情应该有效：

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

Answer 2

您可以格式化 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 3

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

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

Answer 4

这将为您做到这一点：

http://jsfiddle.net/J6PRM/

希望它有所帮助。