Как я могу применить CSS с помощью JQuery только тогда, когда элемент имеет определенный атрибут?

Question

Я пытаюсь использовать jQuery для добавления CSS к элементам, но только если они имеют определенный атрибут.

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

Я использую код jQuery:

if ($('.body_text a').attr('name')) {
    $(this).css({
        'display': 'inline-block',
        'position': 'relative',
        'top': '-200px',
        'visibility': 'hidden'
    })
}

Но это не похоже на работу. Если я помещу предупреждение внутри оператора if, предупреждение срабатывает. Я делаю что-то неправильно?

Answer 1

Это селектор jQuery, который вы ищете:

//de or: $('.body_text a[name="value"]').css({
$('.body_text a[name]').css({
    'display': 'inline-block',
    'position': 'relative',
    'top': '-200px',
    'visibility': 'hidden'
})

http://api.jquery.com/attribute-equals-selector/

Вы также можете сделать это с помощью CSS:

.body_text a[name] {
    display: inline-block;
    position: relative;
    top: -200px;
    visibility: hidden;
 }

http://www.w3schools.com/css/css_attribute_selectors.asp

Answer 2

Просмотр документации:

Метод.attr() получает значение атрибута только для первого элемента в соответствующем наборе. Чтобы получить значение для каждого элемента отдельно, используйте циклическую конструкцию, такую ​​как метод.each() или.map() jQuery.

Я думаю, это твоя проблема?

Answer 3

Это потому что $(this) на самом деле не ссылается ни на что - его нужно поместить в функцию, чтобы ссылаться на что-то.

Тем не менее, следующий код проходит через все aс name атрибут и применяет стили к каждому.

$('.body_text a[name]').css({
     'display': 'inline-block',
     'position': 'relative',
     'top': '-200px',
     'visibility': 'hidden'
})

Answer 4

Попробуйте это, это должно сделать трюк:

if( $('.body_text a').attr('name') == "TEXT HERE" ){
     // Do something
} else {
     // Do Something else
}

Обязательно зацикливайтесь, используя.each на элементе, который вы ищете.

$('.body_text a').each(function(){