jquery获取href值新选择的类

Question

嗨，我有一个 html 片段如下:-

<ul id="userTabs" class="clearfix">

                <li class="selected"><a href="">Profile Home</a></li>

                <li><a href="/test">test</a></li>

                <li><a href="/test2">test2</a></li>

                <li><a href="/test3">test3</a></li>

                <li><a href="/test4">test4</a></li>


    </ul>

我的jquery代码片段是-

$("#userTabs li").click(function(e){
  e.preventDefault();
  $("#userTabs li").removeClass('selected');
  $(this).addClass('selected');
  var href = $('li:selected a').attr('href');
  alert(href);

});

现在的问题是，当我单击链接时，我需要获取一个 href 值，上面的代码会将当前选定的类替换为新选定的链接。但我无法获取选定的类 href 值。我在这里缺少什么？

Answer 1

问题是您在这一行中使用了 : 而不是 .:

var href = $('li:selected a').attr('href');
//              ^-- This should be a . since `selected` is a class name

但是您可以只使用对 li 的引用来获取其子 a 元素，而不用再次遍历整个 DOM:

var href = $(this).children("a").attr("href");

更好的是，您可以将事件处理程序委托(delegate)给 ul 元素，这样会更加高效(只有一个事件处理程序，而不是每个 li 元素一个) :

var tabs = $("#userTabs");
tabs.on("click", "li", function (e) {
    e.preventDefault();
    tabs.children(".selected").removeClass("selected");
    var href = $(this).addClass("selected").children("a").attr("href");
});