0

我的divs 可能包含如下文本：

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

或者像这样

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

或任何其他组合，但最终级别的文本可能会或可能不会被分隔<br />。（aspan是包含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>and<span>格式会丢失。所以这就是为什么我只想通过在 a 中选择最深级别的文本节点来访问所有文本，div比如说在 a 中$textNodes。这样我就可以$textNodes.text(changedText);在保留文本节点父节点的结构和样式的同时简单地做到这一点。

那可能吗？

4

3 回答 3

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().

于 2013-01-20T14:34:10.803 回答
0

您可以只定位BRas 选择器并替换它

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

演示：http: //jsfiddle.net/fhnHR/1/

如果与其他BR更高的潜在问题DIV使用.last()隔离最后一个BR，或用于filter()检查最后一个是否处于最深层次。

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

于 2013-01-20T14:21:39.453 回答
0

做这样的事情：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>
于 2013-01-20T14:25:33.127 回答