javascript - 使用 Cheerio/jQuery 删除所有元素,但通过结构保持选中状态
问题描述
我想指定我想保留哪些元素,但要使用它的结构。例子:
<html>
<head>
<meta xx>
</head>
<body>
<div class="some1">
<div class="some1-1"></div>
<div class="some1-2"></div>
<div class="some1-3"></div>
<div class="some1-4"></div>
<div class="some1-5"></div>
</div>
<div class="some2">
<div class="some2-2">
<div class="some2-2-1"></div>
<div class="some2-2-2"></div>
</div>
<div class="some2-3"></div>
<div class="some2-4"></div>
<div class="some2-5"></div>
</div>
</body>
</html>
我只需要保留例如:.some2-2-1、.some-2-3、.some-1-3,通过删除所有其他元素,并保留它的父母,所以它将是:
<html>
<head>
<meta xx>
</head>
<body>
<div class="some1">
<div class="some1-3"></div>
</div>
<div class="some2">
<div class="some2-2">
<div class="some2-2-1"></div>
</div>
<div class="some2-3"></div>
</div>
</body>
</html>
我无法指定要删除哪些元素(它是动态的),但只能指定要保留的元素,如何完成?
$('*:not('.some2-2-1, .some-2-3, .some-1-3')').remove()
在这种情况下不起作用;)
解决方案
我敢肯定会有几种方法可以做到这一点,但这是一种方法(见评论):
$(function() {
var elementsToKeep = [
".some2-2-1",
".some2-3",
".some1-3",
];
// parent elements that are needed will be appended here
var needed = [];
for (var i = 0; i < elementsToKeep.length; i++) {
// get the hierarchy, e.g. ".some2-2-1" -> "2-2-1"
var hierarchyPos = elementsToKeep[i].replace(".some", "");
// if we're keeping 2-2-1, we also need 2-2, and 2
//
// recursively remove the last two characters to get
// the parent level until there's nothing left
while (hierarchyPos !== "") {
if (!needed.includes(hierarchyPos)) {
needed.push(hierarchyPos);
}
hierarchyPos = hierarchyPos.slice(0, -2);
}
}
// "needed" will now contain 2-2-1, 2-2, 2, etc.
console.log("all required elements:", needed.join(", "));
// iterate through each of the original selectors
$(elementsToKeep.join(",")).each(function() {
// check each of this element's siblings and remove
// any whose class isn't included in the "needed" array
var siblings = $(this).siblings();
siblings.each(function(i, el) {
var pos = el.className.replace("some", "");
// if "pos" is 2-2-2 (for example), it won't appear in "needed",
// so it's safe to remove
if (!needed.includes(pos)) {
$(el).remove();
}
})
})
// finished
console.log("final output:");
console.log($("#test").html());
})
<div id="test">
<div class="some1">
<div class="some1-1"></div>
<div class="some1-2"></div>
<div class="some1-3"></div>
<div class="some1-4"></div>
<div class="some1-5"></div>
</div>
<div class="some2">
<div class="some2-2">
<div class="some2-2-1"></div>
<div class="some2-2-2"></div>
</div>
<div class="some2-3"></div>
<div class="some2-4"></div>
<div class="some2-5"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
推荐阅读
- docker - 在 windows 的 jenkins 中配置“Docker Host Uri”时连接被拒绝。怎么解决?
- google-sheets - Zapier: Update google spread sheet row
- scala - 在需要时提取期权价值的优雅方式
- node.js - XMLHttpRequest 'Access-Control-Allow-Origin'... the response must not be the wildcard '*' when the request's credentials mode is 'include'
- javascript - 如何使用 ajax 向具有多对多关系的数据库添加行?
- javascript - 在 Vue.js 我不能使用 this.(nameOfObject) 来绑定数据
- google-apps-script - 如何获取 google 日历 SERIAL 事件的所有条目
- reactjs - 有多个模块的名称只是大小写不同(ReactJS、Babel、样式组件)
- shopware - (Shopware 6) Using hot-proxy with a plugin with js files
- python - 将 epoch(即 01/01/0001 午夜)转换为 pandas 中的 DateTime