knowing if a HTML tag has a text node

Question

given the 2 alternative

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

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

I would like to get the number inside .example in both cases, with the same selector OR somehow knowing the difference between .no-text and .with-text

doing $(".example").text() will give me 50 100

currently I am experimenting with .clone().children().remove().end().text() but I need to somehow know it is .no-text and .with-text

@AndreasEriksson that could work, I will test on more test cases — Nick Ginanto, Sep 08 '15 at 09:05

score 1 · Answer 1 · answered Sep 08 '15 at 08:58

I dont knkow how you want your data, but if you for example want an array of all text node texts, then you could do it like this.

Create an empty array, then loop over all the .example elements and check if each "this" has a span inside of it.

if you think that a "surprise" element can be anything then for example add || $(this).children("p").length on the right hand of the if() check

var textArray = []

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

score 1 · Answer 2 · answered Sep 08 '15 at 09:03

If you only want to get the number directly under .example, try this:

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

//100
//100

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

Alex Char · Answer 3 · 2015-09-08T09:13:50.503

You can create an object and store the values in an array object:

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>

score 0 · Answer 4 · answered Sep 08 '15 at 09:03

I don't know what exactly you want to achieve, but I created a little jsfiddle that might be able to help: 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>");

});

score 0 · Answer 5 · answered Sep 08 '15 at 09:03

0

Try This:

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

answered Sep 08 '15 at 09:03

Abhishek sharma

61
4

score 0 · Answer 6 · answered Sep 08 '15 at 09:03

0

You could do something like the following

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

answered Sep 08 '15 at 09:03

dchar

1,665
2
19
28

score 0 · Answer 7 · answered Sep 08 '15 at 09:14

Use .filter() in conjunction with .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>

knowing if a HTML tag has a text node

7 Answers7