Get first visible text from multiple nested children elements in jquery

Question

I can't really explain what I'm trying to do in words as clearly as HTML code can with expected outputs. But to summarize what I'm trying to do is get all the item specifics values of a eBay auction using jquery. For the Item condition the jquery code doesn't even enter the div to check for text since it hasn't found any text before it.

I was suggested to use this code which doesn't function properly.

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

Anyways here is the HTML Code of 3 Item Specifics values.

<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>

Outputs must be:

1. Unbranded
2. China
3. New (Could be New: since it feels impossible)

Found a solution that semi works just can't figure out how to loop it for every td.

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

Here is my best attempt that doesn't work

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

Answer 1

Use the #element part to grab a group of values to filter one at a time:

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

EDIT:

Hmmm... try New on its own, then look for the rest:

$('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 2

Use this code,

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

Answer 3

try this :

$('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

Answer 4

This kind of works:

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

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