I am working with Flexigrid plugin with JQuery. Ok so I have a div with two span elements, they would contain the text/display text for the buttons that flexigrid provides. The problem is, there is no mechanism to add ids to those buttons, except for adding different text.

<div class="tdiv2>  
    <div class="fbutton">
        <div>
            <span class="view" style="padding-left: 20px;">Add</span>
        </div>
    </div>
    <div class="fbutton">
        <div>
            <span class="view" style="padding-left: 20px;">Delete</span>
        </div>
    </div>
</div>  

This is how the buttons are arranged. So onclick of that button, I get the text inside the span, as Add and Delete. Now I want to add a class tag to that span, to differentiate between the active button and the other one.

So I came up with the idea, that if I could get span-text that matches to the text being returned, I could add the class to that span.

But when I do

alert($('.tDiv2 span').html()); 

I am only getting the text of the first span and not the second one. Could somebody help me with getting the html of both spans and not just the first one.

I am working with Flexigrid plugin with JQuery. Ok so I have a div with two span elements, they would contain the text/display text for the buttons that flexigrid provides. The problem is, there is no mechanism to add ids to those buttons, except for adding different text.

<div class="tdiv2>  
    <div class="fbutton">
        <div>
            <span class="view" style="padding-left: 20px;">Add</span>
        </div>
    </div>
    <div class="fbutton">
        <div>
            <span class="view" style="padding-left: 20px;">Delete</span>
        </div>
    </div>
</div>  

This is how the buttons are arranged. So onclick of that button, I get the text inside the span, as Add and Delete. Now I want to add a class tag to that span, to differentiate between the active button and the other one.

So I came up with the idea, that if I could get span-text that matches to the text being returned, I could add the class to that span.

But when I do

alert($('.tDiv2 span').html()); 

I am only getting the text of the first span and not the second one. Could somebody help me with getting the html of both spans and not just the first one.

• javascript
• jquery
• jquery-plugins
• javascript-framework
• jquery-events

Share Improve this question Follow edited Jun 12, 2019 at 17:13 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 30, 2011 at 21:20 machamacha 7,4971919 gold badges6565 silver badges8585 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try this >

$('.tDiv2 span').each(function(index, el) { alert($(el).html()); });

You need each.

$('.tDiv2 span')each(function(node){ alert(node.html()); });

However, I would like to point out that this approach is likely to cause accessibility problems for screen reader users. If you absolutely must re-invent buttons for some reason, then use ARIA attributes so that your blind visitors have some hope of getting it to work right.

jQuery automatically selects the first element in a series if you try to get a property like html or text from it. to get the second (or any number) try:

alert($('.tDiv2 span').eq(1).html()); //returns 2nd element's html content

You can substitute any 0 based index in for 1.