CODEWITHSUNDEEP
jquery
Ali Nouman
Ali Nouman

Reputation: 3412

Getting parent div sibling tag

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

Upvotes: 0

Views: 438

Answers (2)

Ariful Islam
Ariful Islam

Reputation: 7675

@James Allardice is perfectly correct. I just give another solution of that problem:

$(".clipartcategory").click(function() {
    var acontent = $(this).parent().parent().prev().find("a").text();
});

You may also use .html() in replace of .text() if you think there might contain html tag with text.

Upvotes: 0

James Allardice
James Allardice

Reputation: 166051

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.

Upvotes: 1

Related Questions