Question

I have a HTML section like this:

<li data-file="file.mp3">
    <div class="pink-light playing">

Now, I want to get the “data-file” attribute of <li>.
But I have several <li> tags, and I want to get only the
attribute that has a div with “playing” class inside.

My script:

$(".playing").before($("li"),function(){

    alert($(this).attr("data-file"));

});

What is wrong?

Thanks!

Answer 1

There are a couple of ways of doing it. If the .playing element will be unique, then:

var file = $(".playing").closest("li").attr("data-file");

closest finds the closest ancestor that matches a given selector. Since your .playing element is a child (descendant) of the li, that’s how you can find it.

Alternately, you could use the :has pseudo-class:

var file = $("li:has(.playing)").attr('data-file');

…but be aware that :has is a jQuery thing, so it can’t delegate to the selector engine.