jQuery: выберите атрибуты данных, которые не пусты?
Я пытаюсь выбрать все элементы, которые имеют data-go-to
атрибут, который не пуст.
Я пробовал $('[data-go-to!=""]')
но, как ни странно, кажется, что он выбирает каждый элемент на странице, если я это сделаю.
11 ответов
попробовать
$(':not([data-go-to=""])')
обновление:
ради того, чтобы никого не сбить с пути, этот ответ будет работать в более старых версиях jQuery, но не является будущим доказательством. Поскольку ответы @gmo и @siva, похоже, работают с более поздними версиями, я откладываю (и призываю вас) свои ответы....и, конечно, надеюсь, что у вас будет фантастический день.
как далее ссылку, и вверх-к-дата (Май'14) (авг'15) (сентябрь 16) (Апрель 17) (Мар'18)...
Ответ, который работает с:
пустые строки:
если
attr
должны exist& мог бы имеют любое значение (или вообще нет)
jQuery("[href]");
отсутствует атрибуты:
если
attr
мог бы exist & если существует,должны иметь некоторое значение
jQuery("[href!='']");
или так:
если
attr
должны exist&есть иметь какое-то значение...
jQuery("[href!=''][href]");
PS: возможны дополнительные комбинации...
проверьте этот тест в jsFiddle для примера:
-
jQuery v1.11.0 ->
jsFiddle онлайн-тест -
jQuery v2.1.0 ->
jsFiddle онлайн тест -
jQuery v2.1.3 ->
jsFiddle онлайн-тест -
jQuery v3.0.0-alpha1 ->
jsFiddle онлайн-тест -
jQuery v3.1.1 Slim ->
jsFiddle онлайн-тест -
jQuery v3.2.1 ->
jsFiddle онлайн-тест -
jQuery v3.3.1 ->
jsFiddle онлайн-тест последняя версия jQuery доступна в jsFiddle в мае 29 ' 18 -
jQuery Edge ->
jsFiddle онлайн-тест jQuery edge версия (использовать с осторожностью)
или здесь в так с этим Код.
* фрагмент работает под управлением jQuery v2.1.1
jQuery('div.test_1 > a[href]').addClass('match');
jQuery('div.test_2 > a[href!=""]').addClass('match');
jQuery('div.test_3 > a[href!=""][href]').addClass('match');
div,a {
display: block;
color: #333;
margin: 5px;
padding: 5px;
border: 1px solid #333;
}
h4 {
margin: 0;
}
a {
width: 200px;
background: #ccc;
border-radius: 2px;
text-decoration: none;
}
a.match {
background-color: #16BB2A;
position: relative;
}
a.match:after {
content: 'Match!';
position: absolute;
left: 105%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_1">
<h4>Test 1: jQuery('a[href]')</h4>
<a href="test">href: test</a>
<a href="#">href: #</a>
<a href="">href: empty</a>
<a>href: not present</a>
</div>
<div class="test_2">
<h4>Test 2: jQuery('a[href!=""]')</h4>
<a href="test">href: test</a>
<a href="#">href: #</a>
<a href="">href: empty</a>
<a>href: not present</a>
</div>
<div class="test_3">
<h4>Test 3: jQuery('a[href!=""][href]')</h4>
<a href="test">href: test</a>
<a href="#">href: #</a>
<a href="">href: empty</a>
<a>href: not present</a>
</div>
Я не уверен в простом селекторе, но вы можете использовать filter()
:
$('[data-go-to]').filter(
function(){
return ($(this).attr('data-go-to').length > 0);
});
ссылки:
имеет 'data-attributename' и его значение не пустое:
$('[data-attributename]:not([data-attributename=""])')
имеет "data-attributename" пустой или нет:
$('[data-attributename]')
$('[data-go-to]').filter(function() {
return $(this).data('go-to')!="";
});
используя :not
, .not()
, :empty
etc будет проверять только, пуст ли сам элемент, а не атрибут данных. Для этого вам придется фильтровать на основе значения атрибутов данных.