Ближайший H3 над таблицей с классом

Question

Я пытаюсь выбрать заголовок таблицы, в которой установлен класс. На словах: ищите элемент с классом .red и начать искать h3 элемент над этим элементом.

$('.xred').closest('table').addClass('test').prev('h3').addClass('test');

.test { background-color: green; }
.xred { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Goal</h3>
<table>
  <tr>
    <td>Blabla</td>
    <td class="xred">Red</td>
  </tr>
</table>

Работает нормально, пока я ничего не кладу между столом и Н3.

Как я могу добиться, чтобы это также работало, когда другие элементы находятся между ними?

$('.xred').closest('table').addClass('test').prev('h3').addClass('test');

.test { background-color: green; }
.xred { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Goal</h3>
<div>The Problem DIV</div>
<table>
  <tr>
    <td>Blabla</td>
    <td class="xred">Red</td>
  </tr>
</table>

Большое спасибо!

Answer 1

Я не совсем уверен, почему вы сделали что-то неэффективное. У вас нет прямого доступа к HTML?

Если вы это сделаете, может быть, проще сделать что-то подобное?

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapperdiv>
  <h3>Goal</h3>
  <div>The Problem DIV</div>
  <table>
    <tr>
      <td>Blabla</td>
      <td class="xred">Red</td>
    </tr>
  </table>
</div>

Автор сценария:

$('.xred').closest('table').parent().find("h3").addClass("test");

Наличие обертки делает все проще, да?

Опять же, я бы лично никогда не создавал ничего, что мне понадобилось бы для такого большого поиска DOM. Это дико неэффективно. Я бы порекомендовал хорошую HTML-структуру с div-файлами-обертками, которые можно хранить в переменной следующим образом:

var $wrapperDiv = $('.wrapperDiv');

$('h3', $wrapperDiv).addClass("test");

Но это только я...

но почему?

Ну, когда вы используете такие функции, как prevAll а также closestВы пересекаете весь DOM. Это делает использование процессора довольно медленным и часто приводит к задержкам на медленных устройствах, таких как мобильные телефоны. Это также разряжает их батареи быстрее.

Кроме того, когда функция укладывается поверх функции, вы заметите запаздывающие ответы на любом устройстве.

Лучше всего один раз хранить статическую оболочку внутри переменной, чтобы вам не приходилось постоянно проходить через DOM. Затем, используя как можно меньше селекторов, чтобы получить то, что вам нужно, потому что снова; каждая функция выбора будет еще раз проходить через DOM. Это просто процессор интенсивно.

Answer 2

Вам нужно использовать .prevAll() что выберите предыдущий элемент, который соответствует. .prev() выберите предыдущий элемент, если соответствует параметр.

$('.xred').closest('table').addClass('test').prevAll('h3').addClass('test');

.test { background-color: green }
.xred { background-color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Goal</h3>
<div>The Problem DIV</div>
<table>
  <tr>
    <td>Blabla</td>
    <td class="xred">Red</td>
  </tr>
</table>