Question

我有div个可能包含这样的文字：

<div>
<p>
<span>My text <br /> Some more text</span>
</p>
</div>

或者像这样

<div>
<p> Here's a chunk of text </p>
</div>

或任何其他组合，但最终级别的文字可能由<br />分隔，也可能不分隔。（span是否包含br个节点？或者是同一级别的两个兄弟姐妹？）

在第一种情况下，我想要的最深的孩子的文字是：

My text
Some more text

在第二个：

Here's a chunk of text

我的观点是 - 无论最深层次是什么，我都希望所有兄弟姐妹都达到这个水平。有什么帮助吗？

修改

我不能简单地使用$('p').text()，因为这将只返回文本，我需要编辑，然后返回相同的兄弟，同时保留其样式。所以，例如，如果我有

<div>
<p>
<strong>
<span style='font-family:arial'> Here's some <br /> text</span>
</strong>
</p>
</div>

我做$('p').text()然后我会得到“这是一些文字”。现在，当我在变量中操作此文本时，请说changedText（其中保留<br />），如何将其放回原点？我不能简单地做

$('p').text(changedText);我也不能$('p').html(changedText');

因为<strong>和<span>格式将丢失。这就是为什么我只想通过选择div中最深层次的文本节点来访问所有文本，让我们说$textNodes。这样我就可以在保留文本节点父节点的结构和样式的同时简单地$textNodes.text(changedText);。

这可能吗？

Answer 1

您可以使用.children()，直到到达最深的节点。我将它包装在jQuery函数中，如下所示。

$.fn.deepest = function(){
  var $level = this.first();
  while (!!$level.children(":not(br)").length) {
    $level = $level.children();
  }
  return $level;
};

console.log($("div").deepest());
//[ <span>My text <br> Some more text</span> ]

您可以使用.contents()获取文本节点并对其进行操作或.text()。

Answer 2

您可以将BR定位为选择器并替换它

$('p br').replaceWith('\n');

DEMO：http://jsfiddle.net/fhnHR/1/

如果BR中其他DIV更高的潜在问题使用.last()来隔离最后BR，或使用filter()检查最后一个是{{1}}在最深层次。

提供一些更真实的html示例，展示潜在的深度和可能的树结构将有所帮助。您可以将它们放在小提琴演示中并更新它

Answer 3

执行以下操作：http://jsfiddle.net/hWkkJ/2/

jquery的：

$(function(){
  $('.append').append($('p').html()); 
});

HTML：

<div>
<p>
<span>My text <br /> Some more text</span>
</p>
</div>

<div class="append"></div>

jQuery获得最深层次的文本节点兄弟

修改

3 个答案: