jQuery 检测文档是否包含与 link 的 href 匹配的 id

Question

我编写了一个将 href 添加到按字母顺序排列的导航栏的函数。我做到了，所以每个字母部分都给自己一个 ID。我想这样做，如果没有例如 "C" 部分，我可以将 class 添加到 link linking 到 #c 那会禁用它。这是我目前所拥有的：

 <ul class="no-bullet inline">
      <li><a class="scroller"><strong>A</strong></a></li>
      <li><a class="scroller"><strong>B</strong></a></li>
      <li><a class="scroller"><strong>C</strong></a></li>
</ul>

  <div class="space-above space-below letter-section">
       <h4 class="alpha-heading"><strong>A</strong></h4>
        <ul class="no-bullet">
             <li><a class="naming" href="#">Benny Goodman</a></li>
             <li><a class="naming" href="#">Benny Goodman</a></li>
             <li><a class="naming" href="#">Benny Goodman</a></li>
         </ul>
   </div>
 <div class="space-above space-below letter-section">
       <h4 class="alpha-heading"><strong>A</strong></h4>
        <ul class="no-bullet">
             <li><a class="naming" href="#">Benny Goodman</a></li>
             <li><a class="naming" href="#">Benny Goodman</a></li>
             <li><a class="naming" href="#">Benny Goodman</a></li>
         </ul>
   </div>
 <script>
 function alphaLink() {
       var alphaLink = $(this);
       var alphaLinkRef = "#" + alphaLink.text().toLowerCase();
       $(alphaLink).attr("href", alphaLinkRef);
   };
   $('.scroller').each(alphaLink);

   //assigns each content section an ID

   function alphaID() {
       var section = $(this);
       var sectionID = section.text().toLowerCase();
       $(section).attr("ID", sectionID);
   };
   $('.alpha-heading').each(alphaID);

linkMatch function(){
   var link = $(this);
    if(link.length <= 0) {
    $(this).addclass("disabled");
}

$("scroller").each(linkMatch);
</script>

Answer 1

你可以这样做。这是一个例子：

function linkMatch(index, elem){
    var link = elem,
        heading = $(".alpha-heading");

    var linkHref = link.attr("href").substring(1, link.attr("href").length);

    if(typeof(heading[index]) != "undefined") {
        if(linkHref != heading[index].getAttribute("id")) {
            link.addClass("disabled");
        }
    }
}

$(".scroller").each(function(index) {
    linkMatch(index, $(this));
});

编辑我刚刚编辑了我的代码，因为我忘了在 linkHref 变量

中写 length

Answer 2

如果 HREF 类似于“#C”，请看一下：

$(document).ready(function(){
  $('a').each(function(i,e){
     var href = $(this).attr('href')
     if(!findID(href)){
        // Doesn't exist
        $(this).addClass('disabled');
     }
  })
    function findID(ID){
    var exists = false;
    if($(ID).length > 0){
        exists = true;
    }
    return exists;
    }
})

希望对您有所帮助！

已更新！ 抱歉，我忽略了您想禁用 link，而不是点击。 Here is a JsFiddle 如果你用 href="$find-someting-else" 检查 link 你会看到它禁用了 class 而另一个没有。

Answer 3

我采用了 Jeremiah 的代码并略微修改了它以完成我需要它做的事情。非常感谢所有的回答 - 这是最终产品：

   function findID(ID) {
     var exists = false;
     if ($(ID).length > 0) {
      exists = true;
     }
     return exists;
 }

 function matchLink() {
     var href = $(this).attr('href');
     if (!findID(href)) {
         // Doesn't exist
         $(this).addClass('alpha-disabled');
     }
 };
 $('.scroller').each(matchLink);

jQuery 检测文档是否包含与 link 的 href 匹配的 id

jQuery detect if document contains an id matching the href of a link

javascript

jquery

callback

href

matching