Disclaimer: Yes, I am aware of the mess this HTML is. It's from a legacy application. Unfortunately, changing HTML is not an option, since it is a large page with many dependencies.

That said, I have the below code:

<tr>
    <th align="left" style="background:#CCCCCC;" nowrap="">
        <a class="ContentLink addLink" id="content">
            <img border="0" src="/tools/images/buttons/restore.gif" alt="edit (popup)">Add
        </a>
    </th>
    <th colspan="3" nowrap="" width="100%">
        <font id="maroon">Associated Computer(s)</font>
    </th>
</tr>

Using jQuery, I would like to get the string between the font tags "Associated Computer(s)".

I've tried using jQuery's find and next APIs, but it's not working as I expect.

I've tried var myHeader_next = $(this).find("font"); and it returns an object. When I use var myHeader_trim = $.trim(myHeader_next);, I get [object Object].

I've tried var myHeader_next = $(this).find("font").text(); and var myHeader_trim = $.trim(myHeader_next); and for both, I get blank responses.

$(document).ready(function () {
    $(".addLink").click(function(){
        var SR_ID = $("#SR_ID").val();
        var myHeader_next = $(this).find("font").text();
        var myHeader_trim = $.trim(myHeader_next);
        console.log(myHeader_next);
        console.log(myHeader_trim);
    });     
});

I have a feeling I'm not understanding find and next correctly, but don't know why.

Disclaimer: Yes, I am aware of the mess this HTML is. It's from a legacy application. Unfortunately, changing HTML is not an option, since it is a large page with many dependencies.

That said, I have the below code:

<tr>
    <th align="left" style="background:#CCCCCC;" nowrap="">
        <a class="ContentLink addLink" id="content">
            <img border="0" src="/tools/images/buttons/restore.gif" alt="edit (popup)">Add
        </a>
    </th>
    <th colspan="3" nowrap="" width="100%">
        <font id="maroon">Associated Computer(s)</font>
    </th>
</tr>

Using jQuery, I would like to get the string between the font tags "Associated Computer(s)".

I've tried using jQuery's find and next APIs, but it's not working as I expect.

I've tried var myHeader_next = $(this).find("font"); and it returns an object. When I use var myHeader_trim = $.trim(myHeader_next);, I get [object Object].

I've tried var myHeader_next = $(this).find("font").text(); and var myHeader_trim = $.trim(myHeader_next); and for both, I get blank responses.

$(document).ready(function () {
    $(".addLink").click(function(){
        var SR_ID = $("#SR_ID").val();
        var myHeader_next = $(this).find("font").text();
        var myHeader_trim = $.trim(myHeader_next);
        console.log(myHeader_next);
        console.log(myHeader_trim);
    });     
});

I have a feeling I'm not understanding find and next correctly, but don't know why.

• javascript
• jquery

Share Improve this question Follow asked Nov 7, 2013 at 19:00 ChesterChester 1,08399 silver badges1818 bronze badges 5

• .find only looks at children of the selected element. you want to look for a cousin, so you'll have to get the parent of the cousin element and then use find. – Kevin B Commented Nov 7, 2013 at 19:03
• Will that element always have a known id? – Mike Brant Commented Nov 7, 2013 at 19:08
• Unfortunately, it will always have a known id. The tags will be <font id="maroon>Some Random Text</font> repeated 5 times. – Chester Commented Nov 7, 2013 at 19:10
• Going with @KevinB's suggestion, I see the thread stackoverflow./questions/2381757/…. I haven't encountered the term cousin before, so I didn't know it was an option. This lines up with talemyn's suggestion. – Chester Commented Nov 7, 2013 at 19:12
• Although it's not valid, since you've already made mention of the fact that the quality of the HTML isn't great, I have to ask if there will ever be more than one row with <font id="maroon">? If so, then using $('#maroon') will only ever return the first instance of those elements. – talemyn Commented Nov 7, 2013 at 19:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The easiest way to find it would be:

var myHeader_next = $(this).closest("tr").find("font");

That will travel up the DOM change until it finds the first ancestor <tr> and then .find("font") finds all of the <font> tags in the <tr> tags descendants.

At that point, you should have the correct <font> element that you are looking for and .text() will work.

You can use .html().

$('#maroon').html()

returns

Associated Computer(s)