jQuery检测文档是否包含与链接的href匹配的标识

我已经编写了一个将hrefs添加到字母导航栏的函数。我做到了，所以每个字母部分都给自己一个ID。我想在没有例如“C”部分的情况下这样做，我可以向链接到#c的链接添加一个类，以禁用它。这是我到目前为止：jQuery检测文档是否包含与链接的href匹配的标识

<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>

来源

2017-07-20 stolercloud

什么是你的问题？它不起作用吗？ –

我无法通过搜索ID来正常工作。 – stolercloud

我拿走了耶利米的代码，稍微修改了一下，做了我需要的事情。非常感谢所有的答案 - 这里是最终产品：

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);

来源

2017-07-20 18:50:31 stolercloud

您应该将我的答案标记为可接受以帮助我的声誉！很高兴它帮助。有一件事要注意，你可能已经考虑过了，如果你传递一个没有前导＃的findID字符串，它将不起作用。你可以添加一些逻辑来检查＃，如果它不存在，添加它。 –

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

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)); 
});

编辑我刚刚编辑我的代码，因为我忘了写length内linkHref变量

来源

2017-07-20 17:34:37 riverside256

这段代码中有几个错误 - 一旦我修复了语法错误，这几乎可以奏效。但是，它将禁用的类添加到所有链接，而不仅仅是没有任何链接的链接。 – stolercloud

你的意思是？ – stolercloud

function linkMatch（index，elem）var link = elem; var heading = $（“。alpha-heading”）;链接地址（“href”）。如果（typeof（heading [index]）！=“undefined”）{ if（linkHref！= heading [index] .getAttribute（“id”））{link.addClass（“disabled”）; 。 } } } $（ “卷轴”）每个（函数（指数）{ linkMatch（指数，$（本））; }）; 因为这几乎可以工作 - 但是，它增加了禁用所有功能。（“href”）后面的“ – stolercloud

如果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; 
    } 
})

希望这有助于！

已更新！对不起，我忽略了你想禁用链接，而不是点击。 Here is a JsFiddle如果你用href =“$ find-someting-else”来检查链接，你会发现它的类禁用了，而另一个则没有。

来源

2017-07-20 17:51:40

我需要这个来禁用页面加载时的链接而不是点击。 – stolercloud

已更新，应该这样做 –

jQuery检测文档是否包含与链接的href匹配的标识

回答

相关问题