CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bryan Charlie
Bryan Charlie

Reputation: 195

Obtaining text from nested spans with JQuery

I'm having a hard time working with jquery to obtain the text value of in a nested span. Lets say I have the following structure:

<span class='token tag'>
    <span class='token tag'>
        <span class='token punctuation'> < </span>
            div
        </span>
    ...

My goal is to obtain the text div. This pattern holds for all names of opening tags and I would like to select to select all elements with matching names (all divs) following this pattern. I have the following:

$(this.state.$html.filter('.token.tag:has(> .token.tag):has(> .token.punctuation).children()[3]).text()

This was my best attempt so far but its unsuccessful.

Upvotes: 1

Views: 341

Answers (2)

Santosh
Santosh

Reputation: 1839

As you want the text inside nested span, it is better to apply the search with span tag, so that it will eliminate other elements like div.

So if you have a nested div with same classes, it will not be selected.

var txt = $("span.token.tag > span.token.tag > span.token.punctuation").text()
console.log(txt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class='token tag'>
  <span class='token tag'>
    <span class='token punctuation'>div</span>
  </span>
</span>

<div class='token tag'>
  <div class='token tag'>
    <div class='token punctuation'>div2</div>
  </div>
</div>

Upvotes: 3

Neeraj Pathak
Neeraj Pathak

Reputation: 759

var div  = $('.token').find('span.tag').children('span').text();
console.log(div)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='token tag'>
    <span class='token tag'>
        <span class='token punctuation'>div</span>
    </span>
</span>

try this one.

Upvotes: 0

Related Questions