Question

I have a jQuery Mobile accordion menu set up like:

<div class="subCat" data-role="collapsible">
    <h3 title="someTitle">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 both the subcategory name and the title attribute from the image when clicked.

var currCat=$(this).closest('.subCat').children('h3').text();
var titleData=$(this).closest('.subcat').children('h3').attr("title");

“this” being the image that’s clicked. currCat gets the proper string that it needs, but I’m always getting “undefined” for titleData. Not sue what’s going wrong with getting the title.

Answer 1

Your second line has subcat instead of subCat. The following should work:

$(this).closest('.subCat').children('h3').attr("title");

Thank you for reminding me that classNames are case-sensitive in selectors. Easy thing to miss.