我正在使用以下我无法控制的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,但我知道那里只有一个孩子div,而最后一个div里面的东西就是我需要的东西。逻辑应该是检查子div,获取内容并检查子div。如果另一个孩子div,再次检查或者最后返回内容。到目前为止我写的每个循环都会崩溃Chrome,所以我显然写错了。请指教。
编辑:在所有评论之后,我会尝试在一些子弹中使其更简洁。
奖金:最少的代码行。
答案 0 :(得分:1)
...假设
......你可以这样做:
// 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())
&#13;
<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>
&#13;
这只是从最外面的div
开始,如果它至少有一个div div
,它就会向下遍历。{p>因此,最终node
成为最内层的div
子项,node.children
保留其内容节点。
答案 1 :(得分:0)
这应该可以解决问题:
document.getElementById( 'someRandom1' ).querySelector( ':not(div)' ).parentNode.innerHTML