jquery - jQuery：找到包含部分 URL 的 div 并将 ID 添加到 div

Question

我的代码中有一个 div 列表，其中分配了一个自定义数据属性，即“data-for”。

我需要做的是找到具有与部分 URL 匹配的 data-for 属性的 div。

例如，div 的列表可能是：

<div data-for="north-west"></div>
<div data-for="south-west"></div>
etc

如果当前页面的 URL 是http://www.mysite.com/shops/north-west.html，我想找到具有north-west data-attribute (div data-for="north-west ) 并为其分配一个 ID 或类别。

谁能帮我解决这个问题？它需要快速，因为 div 列表很长。

提前感谢您的帮助。

Answer 1

如果您担心性能，请放弃自定义数据属性（这是可能最慢的选择器）并改用 ID。

//Parse out the name of the HTML page you're on.
var selector = window.location.split('/')[2].replace('.html', '');
//Use it as your selector.
$('#' + selector).addClass('foo');

否则使用此选择器：

$('div[data-for="' + selector + '"]').addClass('bar');

Answer 2

可以使用 jQuery 的过滤方法

演示 1

loc = location.pathname;

$("div[data-for]").filter(function(index){
    var obj = loc.match(this.getAttribute("data-for"));
    if(obj)
        return obj.length > 0;
    else
        return false;
}).css({color:"red"})

编辑：或者更好

演示 2

$("div[data-for]").filter(function(index){
    var reg = new RegExp($(this).data("for"))
    return reg.test(location.pathname);
}).css({color:"red"});

Answer 3

$('div').each(function() {  // probably should use a more narrow selector
    var str = $(this).data('for'); // accesses 'data-for' attribute
    if (window.location.href.indexOf(str))>=0) {
        // match found; do something
    }
});

Answer 4

元数据插件可以很好地做到这一点；例如

<div class="foo {bar: 'north-west'} baz"></div>

<script type="text/javascript">
$(function() {
    $('div').each(function() {
        var meta = $(this).metadata();
        console.log(meta);

        // And then do something with meta...
    });
});
</script>

Answer 5

您可以获取路径名并替换除文件名之外的所有内容，因此您将拥有所需的内容。

<script type="text/javascript">
    $(document).ready(function() {
        var data_for = window.location.pathname.replace(/^.*\/([^/]+).html/, '$1');
        $("div[data-for="+data_for+"]").something();
    });
</script>