jQuery 展开元素直到内容
jQuery unwrap element until content
我正在使用我无法控制的以下传入 HTML 结构:
<div id="someRandom1">
<div id="someRandom2">
<div id="someRandom3">
<div id="someRandom4">
...
<p>Actual content</p>
<ul>
<li>This is a thing I need too</li>
</ul>
<a href="">And this</a>
<p>Some more content</p>
...
</div>
</div>
</div>
<p id="additionalGarbage">Don't need this</p>
</div>
我想要完成的是得到以下结果:
<p>Actual content</p>
<ul>
<li>This is a thing I need too</li>
</ul>
<a href="">And this</a>
<p>Some more content</p>
我不知道会有多少 div 但我知道只有一个 child div 最后一个 div 里面的东西是我需要的。逻辑应该是检查 child div,获取内容并检查 child div。如果另一个 child div,请再次检查,否则最终 return 内容。到目前为止我写的每个循环都会崩溃 Chrome 所以我显然写错了。请指教
编辑:在所有评论之后,我将尝试在一些项目符号中使其更加简洁。
- 有未知数量的嵌套 div。 (我对此没有任何控制权)。
- child div 可能是也可能不是 parent div 中的第一个元素。
- 最深处的html结构div需要保持完整。
奖励:最少的代码行。
假设...
- 你有顶级 (因为你说你是从 API 获得的)
- 你只需要移除最外层的divs (按标签名称)
- 要删除的 div 将是其兄弟姐妹中的第一个 div (尽管它周围可能有其他名称不同的元素)
...你可以这样做:
// Assumes you have a handle on the root level
var node = $("#someRandom1");
var div = node.children("div")
while (div.length) {
node = div.first()
div = node.children("div")
}
// now node.children will be the content
alert(node.children().map(function(i, n) { return n.nodeName }).toArray())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="someRandom1">
<p class="garbage"></p>
<div id="someRandom2">
<p class="garbage"></p>
<div id="someRandom3">
<p class="garbage"></p>
<div id="someRandom4">
...
<p>Actual content</p>
<ul></ul>
<a href=""></a>
<p></p>
...
</div>
</div>
<p class="garbage"></p>
</div>
<p id="additionalGarbage"></p>
</div>
这只是从最外层的 div
开始,如果它至少有一个 div div
,它会向下遍历到那个。所以你最终得到 node
是最里面的连续 div
子节点并且 node.children
持有它的内容节点。
这可以解决问题:
document.getElementById( 'someRandom1' ).querySelector( ':not(div)' ).parentNode.innerHTML
我正在使用我无法控制的以下传入 HTML 结构:
<div id="someRandom1">
<div id="someRandom2">
<div id="someRandom3">
<div id="someRandom4">
...
<p>Actual content</p>
<ul>
<li>This is a thing I need too</li>
</ul>
<a href="">And this</a>
<p>Some more content</p>
...
</div>
</div>
</div>
<p id="additionalGarbage">Don't need this</p>
</div>
我想要完成的是得到以下结果:
<p>Actual content</p>
<ul>
<li>This is a thing I need too</li>
</ul>
<a href="">And this</a>
<p>Some more content</p>
我不知道会有多少 div 但我知道只有一个 child div 最后一个 div 里面的东西是我需要的。逻辑应该是检查 child div,获取内容并检查 child div。如果另一个 child div,请再次检查,否则最终 return 内容。到目前为止我写的每个循环都会崩溃 Chrome 所以我显然写错了。请指教
编辑:在所有评论之后,我将尝试在一些项目符号中使其更加简洁。
- 有未知数量的嵌套 div。 (我对此没有任何控制权)。
- child div 可能是也可能不是 parent div 中的第一个元素。
- 最深处的html结构div需要保持完整。
奖励:最少的代码行。
假设...
- 你有顶级 (因为你说你是从 API 获得的)
- 你只需要移除最外层的divs (按标签名称)
- 要删除的 div 将是其兄弟姐妹中的第一个 div (尽管它周围可能有其他名称不同的元素)
...你可以这样做:
// Assumes you have a handle on the root level
var node = $("#someRandom1");
var div = node.children("div")
while (div.length) {
node = div.first()
div = node.children("div")
}
// now node.children will be the content
alert(node.children().map(function(i, n) { return n.nodeName }).toArray())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="someRandom1">
<p class="garbage"></p>
<div id="someRandom2">
<p class="garbage"></p>
<div id="someRandom3">
<p class="garbage"></p>
<div id="someRandom4">
...
<p>Actual content</p>
<ul></ul>
<a href=""></a>
<p></p>
...
</div>
</div>
<p class="garbage"></p>
</div>
<p id="additionalGarbage"></p>
</div>
这只是从最外层的 div
开始,如果它至少有一个 div div
,它会向下遍历到那个。所以你最终得到 node
是最里面的连续 div
子节点并且 node.children
持有它的内容节点。
这可以解决问题:
document.getElementById( 'someRandom1' ).querySelector( ':not(div)' ).parentNode.innerHTML