jquery:你如何选择不被html标签包围的文本？

Question

Beer
<br>
Vodka
<br>
rum
<br>
whiskey

你怎么选择啤酒？还是朗姆酒？在jquery？他们没有被任何HTML标签包围....

Answer 1

如果您想要直接选择文本节点,建议不要使用jQuery.为了澄清,获取一组包装的文本节点不是问题,但将命令链接到一组包装的文本节点上具有不可预测的结果,或者不能与许多命令一起使用,因为它们期望包装的集合包含元素节点.

您可以通过过滤父项的子项来仅返回文本节点,即nodeType === 3如果您的问题是关于对文本执行某些操作,然后获取父元素并操纵文本内容.例如,

$('#parentElement').html(); // html of parent element

$('#parentElement').text(); // text content of parent element and any descendents

$('#parentElement').contents(); // get all child nodes of parent element

如果您想获取文本节点,以下是一种方法

$('#parentElement').contents().filter(function() { return this.nodeType === 3 });

或者你可能想看看Karl Swedberg的Text Children插件,它也提供了各种不同的选项.

编辑:

在回应您的注释时,使用包装集中的文本节点的一种方法是将jQuery对象转换为数组,然后使用该数组.例如,

// get an array of the immediate childe text nodes
var textArray = $('#parentElement')
                    .contents()
                    .filter(function() { return this.nodeType === 3 })
                    .get();

// alerts the text content of each text node
$.each(textArray, function() {
    alert(this.textContent);
});

// returns an array of the text content of the text nodes
// N.B. Remember the differences in how  different 
// browsers treat whitespace in the DOM
textArray = $.map(textArray, function(e) {
    var text = $.trim(e.textContent.replace(/\n/g, ""));
    return (text)? text : null;
});