Скрыть <li>, когда href пуст

Question

Я хочу скрыть любой LI в .social-menu с пустыми ссылками.

У меня изначально было:

$('ul.social-menu li a[href*=""]').hide();

Но она скрывает только ссылку.

Я подумал, что вместо этого я мог бы использовать:

$('ul.social-menu li a[href*=""]').addClass('hidden')

Но это не добавление скрытого класса.

HTML-код:

<ul class="social-menu">
   <li class="facebook"><a target="parent" href=""></a></li>
   <li class="twitter"><a target="parent" href="http://twitter.com/#!/dft_au">Twitter</a></li>
</ul>

Answer 1

Используйте селектор :has() или метод has() , чтобы выбрать все <li> элементы, которые содержат привязку (<a>) с пустым атрибутом href значение:

$('ul.social-menu li:has(a[href=""])').hide();
// or…
$('ul.social-menu li').has('a[href=""]').hide();

Обратите внимание, что .has() более эффективен, чем :has(): http://jsperf.com/jquery-has-vs-has Хотя :has() немного более читабелен ИМХО.

Answer 2

$('ul.social-menu li:has(a[href=""])').hide();

Answer 3

Альтернатива .has / :has, которая в моем варианте проще и наиболее вероятно более эффективна, будет .parent() (или .closest("li"), если li не является прямым родитель ссылки):

$('ul.social-menu li a[href=""]').parent().hide();

(Также не забудьте использовать href="" вместо href*="").

РЕДАКТИРОВАТЬ: Это гораздо эффективнее: http://jsperf.com/jquery-has-vs-has-vs-parent

Answer 4

listItems = ​$('ul li a');

$.each(listItems, function() {
  if($(this).attr('href') == '') {
    $(this).parent().remove();
  } 
});​

http://jsfiddle.net/YZwRH/1/

Answer 5

Я скомпилировал этот маленький jsFiddle , чтобы проиллюстрировать ваш сценарий.Вы используете селектор «contains» (* =), что означает, что он ищет href, не содержащий ничего.Скорее просто явно проверьте пустой href, просто используя "=".

Answer 6

Это работает:

$('ul.social-menu li').has('a[href=""]').hide();