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,但我知道只有一个子div,最后一个div里面的东西就是我需要的。逻辑应该是检查子div,获取内容并检查子div。如果是另一个子div,请再次检查,否则最终返回内容。到目前为止,我写的每个循环都会导致Chrome崩溃,所以我显然写错了。请告知。
编辑:在所有的评论之后,我会尝试在一些项目符号中使其更加简洁。
- 嵌套的div数量未知。(我无法控制)
- 子div可能是也可能不是父div中的第一个元素
- 最深div中的html结构需要保持原样
额外奖励:最少的代码行。
假设。。。
- 您拥有顶级(因为您说过您是从API获得的)
- 您只需要删除最外层的div(按标记名)
- 要删除的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
相关文章:
- 可以't附加html元素jquery
- 循环遍历元素jquery选择器
- 在ajax加载的元素jquery上包含现有的jquery函数
- 如何删除元素列表中的类并添加到另一个元素 Jquery.
- 获取单击的类元素 jQuery 的名称值
- 获取上一个元素 jQuery 的内容
- 根据另一个元素的更改获取一个元素(jquery)
- 区分不同的可拖放元素(jQuery 拖放)
- 除了最后一个<td>元素-Jquery
- 获取子元素jQuery的单选按钮值
- 捕获元素jquery外部的mousedown事件
- .append到非DOM元素jQuery
- 获取其父元素的精确子元素.Jquery
- 获取重复结构中的特定元素jquery
- 捕获隐藏输入元素jQuery的值
- 使用onclick函数获取点击的元素jquery
- 返回父元素 jquery 中的输入值
- 按属性查找元素 jQuery
- 选择元素 jQuery
- 按子元素 - jQuery 的数据 ID 对 li 进行排序