get an id of child element and store in a variable using jquery?

Question

I'm basically trying to do exactly what the subject suggests, but I'm getting "undefined" in my alert, and I'm not entirely sure why. I am fairly new to jquery, so, I probably have the syntax wrong, but not sure where to go from here. I'll post both of my attempts, which both yield "undefined" in the alert...

//In my first attempt, I'm trying to get the id of the inner a tag
<ul>
                <li id="l1" class="active"><a href="#c1">Samp 1</a></li>
                <li id="l2" class=""><a href="#c2">Samp 2</a></li>
                <li id="l3" class=""><a href="#c3">Samp 3</a></li>
        </ul>

var selected = $(".active).children("a").attr("id");
    alert(selected);

//In my second attempt, I'm trying to get the id of the currently selected li
    var selected = $(".active").attr("id");
    alert(selected);

Answer 1

$(".active").children("a").attr("id");

Your <a> elements do not have an id, only an href. And using a selector instead of the children function may make your code easier to read.

Do you mean $(".active > a").attr("href")?

---

$(".active").attr("id");

jQuery will return the id attribute of the first element in the jQuery collection. Do you have another element with class active?

I suggest you try $("ul > li.active").attr("id")

Answer 2

In the first attempt, you're getting the <a> within the <li>...which doesn't have an ID, you just need this:

var selected = $(".active").attr("id");
alert(selected);

So your second attempt is correct, you can see it in action here.

If you actually meant to get the id from the <a> element, then you need to give them IDs and your first attempt will work, you can see it here.