Как выбрать определенный текст сразу после <li>с помощью jQuery?

Question

У меня есть что-то вроде этого:

<ul>
  <li>
    ...
  </li>
  <li>
    Office
    <table>
      .......
    </table>
  </li>
</ul>

И я хочу заменить Office на <h3>Office</h3>, поэтому я сделал:

$("li:contains('Office')").replaceWith('<h3>Office</h3>');

Но это заменяет меня все1009 * (поэтому он тоже удаляет таблицу ...) Я знаю, что это нормально, но как заменить только текст Office, пожалуйста?

Answer 1

Используйте .contents и .eq для выбора только первого узла.

 $("li:contains('Office')").contents().eq(0).replaceWith('<h3>Office</h3>');

Пример: http://jsfiddle.net/ppqvt/

Answer 2

Вы можете использовать contents () для получения всех прямых потомков вашего элемента <li> и filter () для накопления текстовых узлов, которые встречаются до <table>element.

Оттуда вы можете использовать wrapAll () , чтобы создать элемент <h3> вокруг текстовых узлов:

var $contents = $("li:contains('Office')").contents();
var tableIndex = contents.index("table");
$contents.filter(function(index) {
    return this.nodeType == 3 && index < tableIndex;
}).wrapAll("<h3>");