Question

我想在.social-menu中隐藏任何具有空白href的LI。

我最初有：

$('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

使用the :has() selector或the has() method选择包含空<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

这有效：

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

Answer 5

我编译了这个小jsFiddle来说明你的场景。您正在使用“包含”选择器（* =），这意味着它正在寻找不包含任何内容的href。而只是通过使用“=”明确地测试空的href。

Answer 6

listItems = $('ul li a');

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

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

当href为空时隐藏<li> </li>

6 个答案: