Question

我的说明id有很多来自数据库的标签，我无法改变说明，但我想在div description结束前选择文字我要隐藏的文字：

<h4>Price</h4>Members - £125.00 + VAT&nbsp;<br />Non-members - £145.00 + VAT</div>

我可以在div结束前定位:lastOfType(h4)吗？该文字甚至不在tags。

Answer 1

假设您的输出类似于：

<div id="description">
    Lorem ipsum dolor sit amet... harum homero.
    <h4>Price</h4>
    Members - £125.00 + VAT<br />
    Non-members - £145.00 + VAT
</div>

您将无法使用jquery选择器在<h4>作为主文本“Lorem ...”之后查找文本，后面的文本“Members ...”处于同一级别在DOM层次结构中。

您可以使用jquery读取内容，然后解析它，例如：

var content = $("div#description").html();
content=content.replace(/\<h4.*/, "");
$("div#description").html(content);

或使用content.lastIndexOf但如果它是htmlencoded，则不会获得其他<

如果你想“隐藏”文本但不删除，你可以使用上面的内容包装另一个span然后隐藏它，例如：

var content = $("div#description").html();
content = content.replace(/(\<h4.*)/, "<span class='hidden'>$1</span>");
$("div#description").html(content);
$("div#description>.hidden").hide();

（或使用css隐藏隐藏等）

Answer 2

至少有三种方法可以达到预期的效果。 @ freedomn -m描述了其中两个。最后一个，包装您希望显示的文本并隐藏在<span>标记中，绝对是最干净的，因为每次要显示或隐藏DOM节点时都不需要修改文档的结构问题

但是，如果由于某种原因你不能或不想修改HTML的结构，你也可以使用jQuery的.contents()方法来获取包含div标签的所有子节点的集合，然后使用.slice()选择并.remove()删除<div>标记中的最后几个节点。然后，您可以使用.append()将其添加回<div>代码。

var length = $div.contents().length;
var $priceNodes = $div.contents().slice(length - 4).remove(); // Returns a jQuery object representing the last four child nodes of the div tag

$div.append($priceNodes); // Adds the price-related html nodes back into the document just before the closing div tag

这是一个有效的jsFiddle演示了这种方法：https://jsfiddle.net/m14yLesr/

选择并隐藏文本到div的末尾

2 个答案: