Блог

Главная - Вопросы по программированию - jQuery: найдите div, содержащий часть URL-адреса, и добавьте идентификатор в div

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

#jquery #find #attr #indexof #custom-data-attribute

#jquery #Найти #attr #indexof #пользовательский атрибут данных

Вопрос:

У меня есть список 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=»северо-запад) и присвоить ему идентификатор или класс.

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

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

Ответ №1:

Если вас беспокоит производительность, отключите пользовательский атрибут data (который является самым медленным из возможных селекторов) и используйте вместо него 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');

Ответ №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"});

Ответ №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
    }
});

Комментарии:

1. Интересное решение, если не сказать хрупкое. Остерегайтесь данных — для атрибутов «foo» и «fooBar», так как при циклическом просмотре divs с URL-адресом, содержащим «fooBar», он также будет отображаться / находить «foo».

2. Все очень хорошие ответы, но этот, кажется, лучший для меня. Я бы использовал идентификатор, но это означало бы аннулирование моего кода, поскольку у меня было бы много повторяющихся идентификаторов.

Ответ №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>

Ответ №5:

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

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