当href为空时，隐藏<li>。

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>

- Justin

---

你需要使用 has 选择器。你的选择器只隐藏了 <a> 锚点。 - gdoron

Answer 1

使用 :has()选择器 或 has()方法 选择所有包含空 href 属性值的锚点 (<a>) 的 <li> 元素：

$('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()稍微更易读。

- Mathias Bynens

---

性能似乎取决于浏览器。我的Chrome 18更快地执行:has选择器。 - RoToRa

@RoToRa 这还取决于DOM结构。我在测试用例中使用的可能与OP使用的不同，这可能会影响结果。 - Mathias Bynens

Answer 2

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

- gdoron

Answer 3

一个替代 .has/:has 的更简单且 很可能 更高效的方法是使用 .parent()（或者如果 li 不是链接的直接父元素，则使用 .closest("li")）：

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

（还要记得使用 href="" 而不是 href*=""）。

编辑：更高效的方法是：http://jsperf.com/jquery-has-vs-has-vs-parent。

- RoToRa

---

看起来要快得多！ - Justin

Answer 4

这个有效：

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

- Hadas

---

这将仅隐藏<a>，而不是<li>。请查看我的答案。 - gdoron

Answer 5

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

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

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

- sidneydobber

Answer 6

我编译了这个小jsFiddle来说明你的情况。你正在使用“包含”选择器（*=），这意味着它正在寻找一个不包含任何内容的 href。最好直接使用“=”来明确测试空的 href。

- FarligOpptreden