jQuery解包元素直到内容

时间:2016-04-14 14:51:49

标签: javascript jquery html loops unwrap

我正在使用以下我无法控制的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,所以我显然写错了。请指教。

编辑:在所有评论之后,我会尝试在一些子弹中使其更简洁。

  • 有未知数量的嵌套div。 (我对此无法控制)。
  • 子div可能是也可能不是父div中的第一个元素。
  • 最深的div中的html结构需要保持原状。

奖金:最少的代码行。

2 个答案:

答案 0 :(得分:1)

...假设

  • 你有顶级(因为你说你从API获得它)
  • 您只需删除最外层的div (按标记名称)
  • 目标为删除的div将是其兄弟姐妹中的第一个div(虽然可能有其他元素周围有不同的名称)

......你可以这样做:

&#13;
&#13;
// 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;
&#13;
&#13;

这只是从最外面的div开始,如果它至少有一个div div,它就会向下遍历。{p>因此,最终node成为最内层的div子项,node.children保留其内容节点。

答案 1 :(得分:0)

这应该可以解决问题:

document.getElementById( 'someRandom1' ).querySelector( ':not(div)' ).parentNode.innerHTML