如何根据CSS和JavaScript的类名称过滤DIV元素？
要根据类名称过滤DIV元素，代码如下-
示例
<!DOCTYPE html>
<html>
<style>
.filterElements {
float: left;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
background-color: rgb(28, 98, 179);
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
.btn {
border: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
outline: none;
padding: 12px 16px;
background-color: #d6e5ec;
cursor: pointer;
}
.btn:hover {
background-color: rgb(157, 209, 211);
}
.btn.active {
background-color: rgb(34, 95, 228);
color: white;
}
</style>
<body>
<h1>Filter DIV Elements Example</h1>
<div class="filterBtns">
<button class="btn active" onclick="filterSelection('all')">Show all</button>
<button class="btn" onclick="filterSelection('animals')">Animals</button>
<button class="btn" onclick="filterSelection('fruits')">Fruits</button>
</div>
<div class="container">
<div class="filterElements fruits">Orange</div>
<div class="filterElements animals">Giraffe</div>
<div class="filterElements animals">Cheetah</div>
<div class="filterElements animals">Lion</div>
<div class="filterElements fruits">Guava</div>
<div class="filterElements animals">Dog</div>
<div class="filterElements fruits">Banana</div>
<div class="filterElements fruits">Mango</div>
<div class="filterElements animals">Bull</div>
</div>
<script>
filterSelection("all");
function filterSelection(c) {
var x, i;
x = document.querySelectorAll(".filterElements");
if (c == "all") c = "";
Array.from(x).forEach(item => {
removeActiveClass(item, "show");
if (item.className.indexOf(c) > -1) addActiveClass(item, "show");
});
}
function addActiveClass(ele, name) {
var i, arr1, arr2;
arr1 = ele.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
ele.className += " " + arr2[i];
}
}
}
function removeActiveClass(ele, name) {
var i, arr1, arr2;
arr1 = ele.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
ele.className = arr1.join(" ");
}
var filterBtns = document.querySelector(".filterBtns");
var btns = filterBtns.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
输出结果
上面的代码将产生以下输出-
单击任何过滤器按钮时-
-
问题内容： 我想识别该网络元素。它仅定义了这两个类。我不能执行以下操作，因为不使用空格分隔的值。什么是替代品？ 问题答案： 我认为巴拉克·马诺斯的答案不能完全解释这一点。 想象一下，我们只有以下几个元素： XPath如何匹配 只匹配1个（完全匹配），巴拉克的答案 比赛1，比赛2和比赛3（比赛类别包含，课程顺序很重要） 匹配1、2、3和4（只要元素具有class 和） 同样，在这种情况下，Css S
-
问题内容： 我有以下JavaScript数组的房地产主页对象： 我想做的是能够对对象执行过滤，以返回“家庭”对象的子集。 例如，我想根据能够过滤：，，，和。 如何在JavaScript中执行类似下面的伪代码的操作： 注意，语法不必与上面完全相同。这只是一个例子。 问题答案： 您可以使用以下方法： 现场示例： 此方法是新ECMAScript 5th Edition标准的一部分，几乎可以在所有现代浏览
-
问题内容： 给个喜欢 我想获得一个“子系列” ，其中所有值都是字符串。我已经尝试过像这样的布尔索引： 但这给了 KeyError：错误 到目前为止，在寻找合适的方法时，我遇到了select，但这在标签上强加了一个标准，而不是值。在这种情况下，如何基于值的类型进行过滤？ 问题答案： 使用或列出理解： 一样，谢谢： 全部返回： 编辑： 不推荐这样做，谢谢cᴏʟᴅsᴘᴇᴇᴅ：
-
可以对搜索结果进行过滤，只显示包含特定字段值的文档。也可以创建否定过滤器，排除包含特定字段值的文档。 从 Fields 表或 Documents 表中选择要添加的字段过滤器。除了可以创建积极字段和消极过滤器外，Documents 表还可以过滤某一字段是否存在。使用过的过滤器会在 Query 栏下方显示。消极过滤器用红色显示。 从 Fields 列表中添加一个过滤器： 点击想要过滤的字段名。这里显示
-
问题内容： 我一直在尝试使用docker process命令获取docker实例的容器ID，但是当我尝试使用 名称 过滤器时，对我来说效果 很好 。 结果容器ID： 3c7e865f1dfb 但是，当我使用 图像进行 过滤时，我将获得所有实例容器ID： 结果容器ID： 5570dc09b581 3c7e865f1dfb 但我希望仅获得mariadb的容器ID。 如何使用过滤器作为图像获取Docke
-
问题内容： 我是selenium测试的新手。我想使用selenium获取css类名。我正在使用eclipse和Java进行开发。 有什么方法可以使用selenium获得类名“ odd”或“ even”？一世 问题答案： 是的，您可以根据需要使用功能。 指定需要知道其类的元素的Xpath。 谢谢。