Question

我有很多DIV，比方说100，按类别划分：

<div id="div1" class="cat01">text</div>
<div id="div2" class="cat02">text</div>
<div id="div3" class="cat01">text</div>
<div id="div4" class="cat02">text</div>
<div id="div5" class="cat03">text</div>
<div id="div6" class="cat01">text</div>

我想过滤一个特定的班级假设我点击“仅过滤器cat02”按钮然后我在页面上只有这个：

<div id="div2" class="cat02">text</div>
<div id="div4" class="cat02">text</div>

我不必使用类来定义类别，但它似乎是合适的解决方案......

非常感谢你的帮助！

编辑：更清晰

这是文件：

<div id="principal">
    <div class="abc1 categ1">Text0</div>
    <div class="abc5 categ3">Text0</div>
    <div class="abc4 categ2">Text1</div>
    <div class="abc7 categ1">Text0</div>
    <div class="abc2 categ2">Text2</div>
    <div class="abc4 categ3">Text0</div>
    <div class="abc6 categ1">Text0</div>
    <div class="abc7 categ2">Text3</div>
</div>

我想要这个：

Text1
Text2
Text3

Answer 1

您可以这样做：

var list = document.getElementsByClassName('cat02');
for (var i = 0; i < list.length; i++) {
  // this will remove the node from the page
  list[i].parentNode.removeChild(list[i]);

  // if you just want to hide it, you can do this:
  // list[i].style.display = 'none';
}

请注意，大多数浏览器都不支持getElementsByClassName - 对于那些不支持的用户，您可能必须使用自定义实施，例如here。

更新：如果所有DIV都是单个DIV的直接子级，并且每个DIV只包含一个类，则可以使任务更加简单。您可以跳过getElementsByClassName，而只是迭代孩子：

function showOnly(parent, className) {
  className = ' ' + className + ' ';

  var e = parent.firstChild;
  while (e != null) {
    if (e.nodeType == 1) {
      if ((' ' + e.className + ' ').indexOf(className) > -1)
        e.style.display = 'block';
      else
        e.style.display = 'none';
    }

    e = e.nextSibling;
  }
}

showOnly(document.getElementById('masterdiv'), 'cat02');

编辑：我之前已修复过几个错误。 indexOf比较应为> -1而不是> 0，并且子列表包括应忽略的空文本节点（标记之间的空格），因此检查e.nodeType == 1

Answer 2

似乎jQuery在这里会有很多帮助。你可以打电话给$("div[class!='class02']")并获得你想要的一系列物品。然后，您可以将.addClass('hidden')或其他任何内容发送给其他项目。

Answer 3

蛮力解决方案：

var list = document.getElementsByTagName('div');
for (var i = 0; i < list.length; i++) {
    if (list[i].className != 'cat02') {
        list{i].style.display = 'hidden';
    }
}

将函数包含在这样的函数中：

function filterDivs(nameToFilter) {
var list = document.getElementsByTagName('div');
for (var i = 0; i < list.length; i++) {
    if (!contains(list[i].className.split(' '), nameToFilter)) {
        list{i].style.display = 'hidden';
    }
}
}

编辑：使用此函数搜索我找到here

的数组中的字符串

function contains(a, obj) {
    var i = a.length;
    while (i--) {
        if (a[i] === obj) {
            return true;
        }
    }
return false;
}

只有100个div，它应该运行得非常快，但是如果你增加这个数量很多，它就会变慢。

我还建议您在迭代时不要从集合中删除项目，这会给您带来麻烦。隐藏它们，或者使用不同的集合。

仅限javascript - 如何过滤特定的div类？

3 个答案: