从 jquery 中的多个嵌套子元素中获取第一个可见文本

Question

我无法像 HTML 代码和预期输出一样清楚地解释我正在尝试做的事情。但总而言之，我正在尝试做的是使用 jquery 获取 eBay 拍卖的所有项目特定值。对于 Item 条件，jquery 代码甚至没有输入 div 来检查文本，因为它没有在它之前找到任何文本。

有人建议我使用无法正常运行的代码。

$("td").contents().filter(function(){ 
  return this.nodeType == Node.TEXT_NODE; 
})[0].nodeValue

无论如何，这里是 HTML 3 个项目特定值的代码。

<td width="50.0%">
  <h2 itemprop="brand" itemscope="itemscope" itemtype="http://schema.org/Brand"><span itemprop="name">Unbranded</span></h2>
</td>

<td width="50.0%">
  <span>China</span>
</td>

<td width="50.0%">
  <!-- ITEM CONDITION  -->
  <!-- If Attribute is having hidden text / link     -->
  <div aria-live="polite">                                                  New: <span id="vi-cond-addl-info">A brand-new, unused, unopened, undamaged item in its original packaging (where packaging is </span>
  <span id="hiddenContent" class="u-dspn" aria-expanded="false" >
                                                                            applicable). Packaging should be the same as what is found in a retail store, unless the item is handmade or was packaged by the manufacturer in non-retail packaging, such as an unprinted box or plastic bag. See the seller's listing for full details.<a href="http://pages.ebay.com/help/sell/contextual/condition_1.html" target="_blank" class="infoLink u-nowrap" >
                                                                                    See all condition definitions<b class="g-hdn">- opens in a new window or tab</b></a>
                                                                            </span>

                                                                        <!-- TODO: remove hardcoded ID -->
                                                                        <span id="readFull" class="infoLink u-nowrap">
                                                                            ... <a href="javascript:;">Read more<b class="g-hdn">about the condition</b></a>    
                                                                        </span>
                                                                    </div>
                                                        <!-- </td> -->
</td>

输出必须是：

无品牌
中国
新的（可能是新的：因为感觉不可能）

找到了一个半工作的解决方案，就是不知道如何为每个 td 循环它。

var first_line = $("#element")
                .contents()
                 .filter(function() { 
                     return $.trim(this.innerHTML||this.data);
                 })
                  .first().text();

这是我最好的尝试，但没有用

$('td').each(function() {
     alert(
       $(this).contents()
              .filter(function() { 
                return $.trim(this.innerHTML||this.data);
              })
              .first()
              .text()
     );
});

Answer 1

此类作品：

var i = 0;
$('td').each(function () {
    if (i < 2) {
        alert($(this).contents().text());

    } else {
        alert($(this).text().split(':')[0]);
    }
    i++;
});

Answer 2

使用#element 部分获取一组值以一次过滤一个：

var each_line = $("#element");
each_line.each(function() {
    $(this).contents()
                 .filter(function() { 
                     return $.trim(this.innerHTML||this.data);
                 })
                  .first().text();
});

编辑：

嗯...自己尝试新建，然后寻找其余部分：

$('td').each(function() {
    var newItem = $.trim($('td > div').childNodes[0]);
     alert(
       $(this).contents()
              .filter(function() { 
                  return $.trim(this.innerHTML||this.data||newItem);
              })
              .first()
              .text()
     );
});

<table>
<td width="50.0%">
  <h2 itemprop="brand" itemscope="itemscope" itemtype="http://schema.org/Brand"><span itemprop="name">Unbranded</span></h2>
</td>

<td width="50.0%">
  <span>China</span>
</td>

<td width="50.0%">
  <!-- ITEM CONDITION  -->
  <!-- If Attribute is having hidden text / link     -->
  <div aria-live="polite">                                                  New: <span id="vi-cond-addl-info">A brand-new, unused, unopened, undamaged item in its original packaging (where packaging is </span>
  <span id="hiddenContent" class="u-dspn" aria-expanded="false" >
                                                                            applicable). Packaging should be the same as what is found in a retail store, unless the item is handmade or was packaged by the manufacturer in non-retail packaging, such as an unprinted box or plastic bag. See the seller's listing for full details.<a href="http://pages.ebay.com/help/sell/contextual/condition_1.html" target="_blank" class="infoLink u-nowrap" >
                                                                                    See all condition definitions<b class="g-hdn">- opens in a new window or tab</b></a>
                                                                            </span>

                                                                        <!-- TODO: remove hardcoded ID -->
                                                                        <span id="readFull" class="infoLink u-nowrap">
                                                                            ... <a href="javascript:;">Read more<b class="g-hdn">about the condition</b></a>    
                                                                        </span>
                                                                    </div>
                                                        <!-- </td> -->
</td>
</table>

Answer 3

使用此代码，

  $('table td').each(function() {
    var textVal = ($.trim($(this).text()).split(' '));
    alert(textVal[0]);
  });

Answer 4

试试这个：

$('td').each (function() {
  var currenttd = $(this).children();
  var first_line = $(currenttd)
                   .contents()
                   .filter(function() { 
                       return !!$.trim( this.innerHTML || this.data ); 
                   })
                   .first();
  alert(first_line.text().trim());
});

working fiddle

从 jquery 中的多个嵌套子元素中获取第一个可见文本

Get first visible text from multiple nested children elements in jquery

html

jquery

text

children

elements