Question

I want to write a function such that when class clipartcategory clicked above of it is <h3> tag and inside it is <a> tag i want to get the contents of <a>. Following is my code

<h3><a href="#section1">Arrows</a></h3>
<div>
    <ul>
    <li class="clipartcategory">Custom</li>
    <li class="clipartcategory">Standard</li>
    </ul>
</div>
<h3><a href="#section2">Borders</a></h3>
<div>
    <ul>
    <li class="clipartcategory">CornersStandard</li><li class="clipartcategory">Embellished Outline</li>
    <li class="clipartcategory">Simple Outline</li><li class="clipartcategory">Solid</li>
    </ul>
</div>

I know parent function will give me <div> but how could i reach above of its <h3> and get <a> contents

Answer 1

Assuming your HTML is always going to follow that structure:

$(".clipartcategory").click(function() {
    var aText = $(this).closest("div").prev().find("a").text();
});

Here’s a working example. You mentioned the parent method in your question. I’ve used closest because the div is not the parent of .clipartcategory. The closest method will find the closest ancestor element that matches the selector.