无需点击即可获取 .selected 类的 ID

Question

我想获取已归类为 .selected 的链接的 ID。 我找到了几个解决方案，但它们不起作用，或者它们包含点击功能和“this”。 我不想使用任何点击功能，因为当我打开页面时，已经选择了一个链接。

这是我的列表，最好是列表的 ID，而不是链接

        <ul id="dates">
            <li id="all"><a id="all" href="#all">1943-2003</a></li>
            <li id="li1943" ><a id="a1943" href="#1943">1943</a></li>
            <li id="li1953" ><a id="a1953" href="#1953">1953</a></li>
            <li id="li1963" ><a id="a1963" href="#1963">1963</a></li>
            <li id="li1973" ><a id="a1973" href="#1973">1973</a></li>
            <li id="li1983" ><a id="a1983" href="#1983">1983</a></li>
            <li id="li1993" ><a id="a1993" href="#1993">1993</a></li>
            <li id="li2003" ><a id="a2003" href="#2003">2003</a></li>
        </ul>

我在 jquery 中试过这个

    var selectYear = $("#dates").closest(".selected").attr("id");

还有这个

    var selectYear = $("#dates li a.selected").attr("id");

注意：我更改了 HTML 标记

Answer 1

var li = $("#dates a.selected").parent();
var selectedYear = li.attr('id');

或者如果你不需要 li 对象：

var selectedYear = $("#dates a.selected").parent().attr('id')

更新

我认为您需要创建一个函数来获取所选年份：

function getSelectedYear() {
    return $("#dates a.selected").parent().attr('id');
}

现在您可以在点击和页面加载功能中使用它：

$('#myButton').click(function() {
    var selectedYear = getSelectedYear();
    // ...
});

$(function() {
    var selectedYear = getSelectedYear();
    // ...
});

Answer 2

使用以下代码：

var selectYear = $("#dates li.selected a").attr("id");

Answer 3

像这样尝试.find()：

var selectYear = $("#dates").find("a.selected").attr("id");

或

var selectYear = $("#dates").find("a.selected")[0].id;

---

注意：

在同一页面中，每个 ID 都应该是唯一的，但在您的标记代码中，您可以看到 <li> 和 <a> 的两个元素具有相同的 ID，这就是 无效标记 .

---

根据您的评论：

$(function(){
    var selectYear = $("#dates").find("a.selected").attr("id") || "No id found.";
    alert(selectYear);
});

Fiddle with "No id found."

Fiddle with "Id found."