12

I'd like to find the closest link with attribute findme from a children .startpoint. Structure:

<ul>
    <li><a href="#">Point one</a></li>
    <li><a href="#" data-findme="yipi">Point one</a>
        <ul>
            <li><a href="#">Hello</a></li>
            <li><a href="#">Hello</a>
                <ul>
                    <li><a href="#" class="startpoint">My Startpoint</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JavaScript (jQuery):

$(document).ready(function(){
    console.log(
        $('.startpoint').closest("*[data-findme]")
    );
});

Since the problem is, that the element data-findme is not a a parent element instead it is another child of a parent, my example will not find the element. The example: http://jsfiddle.net/rjhgvxoe/

How can I get it to work?

dude
  • 5,678
  • 11
  • 54
  • 81

2 Answers2

20

You would need a selector like this:

$('.startpoint').closest("li:has(*[data-findme])")

That would query for the closest <li> element which contains an element with the attribute data-findme. To grab the anchor from there

$('.startpoint').closest("li:has(*[data-findme])").children('[data-findme]')
jAndy
  • 231,737
  • 57
  • 305
  • 359
  • The asterisk is not needed. This works fine: `$('.startpoint').closest('li:has([data-findme])')` Also not sure why you switch between single and double ticks. Where possible, use single. – John Vandivier Mar 22 '17 at 18:20
5

You need to use:

 $('.startpoint').closest("ul").find('[data-findme]')

Demo

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125