jQuery: найдите div, содержащий часть URL, и добавьте ID в div

Question

В моем коде есть список элементов div, для которых назначен собственный атрибут данных, который называется «data-for».

Что мне нужно сделать, так это найти div с атрибутом data-for, который соответствует части URL.

Например, список 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) и назначить ему идентификатор или класс .

Может кто-нибудь помочь мне с этим? Это должно быть быстро, так как список div довольно длинный.

Заранее спасибо за помощь.

Answer 1

Если вас беспокоит производительность, отключите пользовательский атрибут данных (который является самым медленным из возможных селекторов) и используйте вместо этого идентификатор.

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

Вы можете получить свой путь и заменить все, кроме имени файла, так что вы получите то, что вам нужно.

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

Answer 5

Плагин Metadata отлично подойдет для этого; например,

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