Jquery selector: функция jquery, которая изменяет стиль `<li>`, содержащего ссылку '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, которая изменяет стиль <li>, содержащего ссылку 'quit'.На данный момент у меня есть следующее:

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

, но я уверен, что есть лучший способ.Проблема в том, что jQuery("li > a > span > span:contains('quit')") возвращает элемент span вместо <li>

Наиболее читаемый ответ выигрывает ...

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"), поскольку более понятно, что вы имеете в виду выход link ...

Answer 2

Если вы знаете, что слово «выход» не может появиться где-либо еще:

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

Проверьте это:

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

Answer 5

На основании вашего исходного кода:

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

даст вам содержащий <li> элемент.