jQuery .each 不会遍历所有后代

Question

我尝试了几种方法，但都无法完成。

我正在设计 ul/li 的菜单。我想这样做，如果<li> 具有 href 属性，jQuery 会为其创建一个事件以重定向到该属性存储的站点。但是当没有href时，什么都不会发生。 问题是当我点击一些 li 时，同一分支中的那些也得到了事件

$("#menu-h > li li").each(function() {

      if($(this).attr("href")) {
           $(this).click(function() {
                window.location = $(this).attr("href");
                return false;
           });
      }
});

似乎each() 不会遍历#menu-h > li 之后的所有 'li'，而只会遍历直系后代（子代），所以当我单击 li 内部的更多内容时，例如#menu-h > li > li，$(this ) 值存储其父级的 DOM 元素。是选择器错误的问题，还是我无法遍历所有后代，只能遍历直接后代？

Answer 1

无需遍历每个元素并添加点击事件处理程序，您可以使用选择器li[href] 找到所有具有href 属性的lis。

$(function(){
    $("#menu-h li[href]").click(function() {
        if($(this).attr("href")) {
            window.location = $(this).attr("href");
            return false;
        }
    });
});

更好的解决方案是使用事件委托

$("#menu-h").on('click', 'li[href]', function() {
    if($(this).attr("href")) {
        window.location = $(this).attr("href");
        return false;
    }
});