Get the specific text inside span using jQuery

Question

Below is the sample td for a dynamic table generated. I need to iterate through the tds to match the 'Data' values and to check if its corresponding 'Result' value is populated or not.

If the 'Result' is not populated , there will not be span class="taglist" element.

<td class="indent0"> 
    Data1 
    <span class="aspect-data"> 
        <span class="taglist">Result1</span> 
    </span>
<td class="indent0"> 
    Data2 
    <span class="aspect-data"> 
        <span class="taglist">Result2</span> 
    </span>

I have tried to iterate using the below code, which alerts all the 'Result' values, but I need to get only the corresponding values of a 'Data' given.

$('.indent0').each(function() {
    var celltext = $(this).html();  
    if (celltext = "Data1") {
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }  
});

if (celltext = "Data1") is assigning ; what you need is if (celltext =="Data1") — Flakes
– Flakes, Commented Mar 15, 2016 at 7:58

Rory McCrossan · Accepted Answer · 2016-03-15 08:00:15Z

2

The issue you have is that DataX is not wrapped in a specific element, so you'll need to grab the text node and check the text value of that against the value you're looking for.

Also note that you're using = for setting a value instead of == to compare a value in your if condition, and your HTML is missing some </td> tags. Try this:

$('.indent0').each(function() {
    var celltext = $(this).contents()[0].nodeValue.trim();
    if (celltext == "Data1") {
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }
});

Working example

answered Mar 15, 2016 at 8:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gurvinder372 · Accepted Answer · 2016-03-15 07:58:15Z

1

try using contents

$('.indent0').each(function() {
    var celltext = $(this).contents().first()[0].textContent;  //this line has changed
    if (celltext == "Data1") {
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }  
});

or

$('.indent0').each(function() {
    var celltext = $(this).contents()[0].nodeValue;  //this line has changed
    if (celltext == "Data1") {
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }  
});

answered Mar 15, 2016 at 7:58

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Ibrahim Khan · Accepted Answer · 2016-03-15 07:59:18Z

You can use startsWith() like following.

$('.indent0').each(function () {
    var celltext = $(this).text().trim(); // change here
    if (celltext.startsWith("Data1")) {  // change here
        var spantext = $(this).find(".taglist").html();
        if (spantext != null) {
            alert(spantext);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="indent0">
            Data1
            <span class="aspect-data">
                <span class="taglist">Result1</span>
            </span>
        </td>
        <td class="indent0">
            Data2
            <span class="aspect-data">
                <span class="taglist">Result2</span>
            </span>
        </td>
    </tr>
</table>

Collectives™ on Stack Overflow

Get the specific text inside span using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related