知道 HTML 标签是否有文本节点答案

【问题标题】：knowing if a HTML tag has a text node知道 HTML 标签是否有文本节点
【发布时间】：2015-09-08 17:44:34
【问题描述】：

考虑到 2 个备选方案

<div class="no-text example">
  100
</div>

<div class="with-text example">
 <span class="surprise"> 50 </span>
 100
</div>

我希望在这两种情况下都使用相同的选择器或以某种方式知道.no-text 和.with-text 之间的区别.example 中的数字

做$(".example").text()会给我50 100

目前我正在尝试使用.clone().children().remove().end().text()，但我需要以某种方式知道它是.no-text 和.with-text

【问题讨论】：

$('.example').children().length?
@AndreasEriksson 可以工作，我会测试更多的测试用例

标签： javascript jquery jquery-selectors

【解决方案1】：

我不知道你想要你的数据，但是如果你想要一个包含所有文本节点文本的数组，那么你可以这样做。

创建一个空数组，然后遍历所有.example 元素并检查每个“this”是否在其中有一个跨度。

如果您认为“惊喜”元素可以是任何东西，那么例如在 if() 检查的右侧添加 || $(this).children("p").length

var textArray = []

$(".example").each(function(){
    if($(this).children("span").length) {
        textArray.push($(this).text())
    }
})

【讨论】：

【解决方案2】：

如果只想直接获取.example下的号码，试试这个：

$(".example").contents()
    .filter(function () {
        return this.nodeType === 3;  //text node
    }).each(function () {
        console.log(+this.nodeValue.trim());
    });

//100
//100

http://jsfiddle.net/DerekL/hjamxbc3/

【讨论】：

【解决方案3】：

我不知道你到底想要实现什么，但我创建了一个小 jsfiddle 可能会有所帮助：http://jsfiddle.net/mxr6eddm/

$(".example").each(function () {

    $("#output").append($(this).text());

    if ($(this).hasClass('with-text')) $("#output").append(" - with text");
    else $("#output").append(" - no text");

    $("#output").append("<br>");

});

【讨论】：

【解决方案4】：

试试这个：

$('div').each(function(){
var valueOfDiv;
if($(this).find('span').length > 0)
{
  valueOfDiv = $(this).find('span').text();
}
else{
  valueOfDiv = $(this).html();
});

【讨论】：

【解决方案5】：

您可以执行以下操作

$('.example').each(function(){
   if ($(this).find('span').length > 0) {
     var span = $(this).children('span');
     alert('Has child :' +span.text());
   } else {
     alert($(this).text());
   }
});

【讨论】：

【解决方案6】：

您可以创建一个对象并将值存储在一个数组对象中：

var o = {};

$(".example").each(function() {
  o[$(this).attr("class")] = $(this).map(function() {
    return $.trim(this.textContent).split(' ');
  }).get();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no-text example">
  100
</div>

<div class="with-text example">
  <span class="surprise"> 50 </span>
  100
</div>

【讨论】：

【解决方案7】：

将.filter() 与.contents() 结合使用：

var which = [];

$('body > .example').contents().filter(function() {
    if(this.nodeType === 3 && this.parentNode.classList.length > 1 ){
          which.push(this.parentNode.classList[0]);
    }
});

$('#elements').html(JSON.stringify(which));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no-text example">100</div>

<div class="with-text example"><span class="surprise"> 50 </span>100</div>

<div id='elements'></div>

【讨论】：