Question

I have a jQuery Mobile accordion menu set up like:

<div class="subCat" data-role="collapsible">
    <h3>Subcategory Name</h3>
    <div class="itemImg">
        <img alt="Item 1" src="[image location]" /><span>Item 1</span>
    </div>
    <div class="itemImg">
        <img alt="Item 1" src="[image location]" /><span>Item 1</span>
    </div>
</div><!--End of subCat-->

Which goes on for several subcategories. I have a bit of code to get “Subcategory Name” when the image is clicked:

var currCat=$(this).closest('.subCat').children('h3').innerHTML;

“this” is the imaged that’s clicked, and I need to get “Subcategory Name” into currCat. However, currently I’m just getting “undefined” for the innerHTML and “[object OBJECT]” when I select children(‘h3’). Any help would be appreciated.

Answer 1

Use .text():

var currCat=$(this).closest('.subCat').children('h3').text();

You could use .html() too, either would work.