Question

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

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

例如，div的列表可能是：

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

如果当前页面的URL是http://www.mysite.com/shops/north-west.html，我想找到具有西北数据属性的div（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的过滤方法

Demo 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"})

编辑：或者更好

Demo 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

Metadata plugin会为此做得很好; e.g。

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

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

5 个答案:

Demo 1

编辑：或者更好

Demo 2