JQuery not behaving itself

Question

Of course it's jQuery, and not my lack of understanding causing this issue, but just in case it is my incompetence, can someone please tell me how to return the text "Acme" within this tag?

<div class="grid-56" id="1005" style="border:solid 1px lightgray;">
    <div class="grid-20 bold">
        <a href="#" class="id_select_company" id="company_name_dialog">
            Acme
        </a>
    </div>
</div>

This doesn't seem to work!

var company_name = $("#" + id).children($("#company_name_dialog")).html();

It produces

<a href="#" class="id_select_company" id="company_name_dialog">
    Acme
</a>

I don't want the anchor tag, just the text.

Answer 1

Use find():

var company_name = $("#" + id).find("#company_name_dialog").html();

It should work with children() too but you shouldn't pass a jQuery object in it, but rather an expression, which in this case is '#company_name_dialog'.

Using html() or text() doesn't matter, as now your selecting the innards of the <a> which doesn't have any HTML in it. The result is same in both cases as text() just strips HTML markup from the contents. Using text() in conjunction with your original code would have worked, but that would have been a workaround and you wouldn't have known what the real problem was.

Answer 2

Try using the text() attribute instead of html().

Answer 3

Of course, with the .text() function:

$("#" + id).children($("#company_name_dialog")).text(); 

Answer 4

Try something more direct (especially since id attribute's should be unique with an HTML doc):

var company_name = $('#company_name_dialog').text();