Jquery 选择器：jquery 函数，它改变包含“quit”的“”的样式。关联

Question

给出以下 html 代码：

<ul>
  <li>
    <a href="somelink">
      <span class='someIconCss'></span>
      <span>home</span>
    </a>
  </li>
  [possibly some more <li></li>]
  <li>
    <a href="somelink">
      <span class='someIconCss'></span>
      <span>quit</span>
    </a>
  </li>
  [possibly some more <li></li>]
</ul>

我想要一个 jquery 函数来更改包含“退出”链接的

的样式。 现在，我有以下内容：

jQuery("li > a > span > span:contains('quit')").parent().parent().parent().attr("style", "float:right");

但我很确定有更好的方法。 问题是 jQuery("li > a > span > span:contains('quit')") 返回 span 元素而不是

最具可读性的答案获胜...

Answer 1

您可以使用 .has()

$('li').has('span:contains("quit")')

或走另一条路并使用 .closest()：

$('span:contains("quit")').closest('li')
// maybe with `$('ul span:contains("quit")')` if you have another span with
// `quit` somewhere in the page. Even better: Give your menu an id!

更容易理解的可能是 a:contains("quit")，因为更清楚地表明您的意思是退出链接...

Answer 2

如果您知道“quit”一词不能出现在其他地方：

jQuery('li:contains("quit")')

因为 contains 检查所有后代，而不仅仅是子代。

工作演示位于 http://jsfiddle.net/alnitak/r8yBb/

Answer 3

您需要 :has() 选择器：

jQuery('li:has(span:contains("quit"))').css('float', 'right');

请注意，我'我们还使用了 css 方法来设置样式。

Answer 4

根据您的原始代码：

jQuery("li > a > span > span:contains('quit')").closest("li")

将为您提供包含的

元素。

Answer 5

看看这个：

$('li:contains("quit")').css("float", "right");