JQuery находит первый родительский элемент с определенным префиксом класса

124

Я хочу получить первого родителя с определенным префиксом класса, предположим:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Например, мой текущий элемент - это, #dividи я хочу найти первый элемент с префиксом класса div-a. Итак, в основном он выберет:

<div class="div-a89892">

jquery jquery-selectors

— Путешествие во времени
источник

Стоп. Используйте несколько классов вместо объединения информации в один класс. Селектор «сопоставления» работает медленно, и этот дизайн не масштабируется для каких-либо изменений. <div class='a'>, а затем укажите правила для div.a. На divсамом деле, я не знаю, зачем вы вообще указываете имя класса.

— Стефан Кендалл

Тем не менее, не объединяйте данные в префиксы классов. Это ужасный паттерн, и его легко исправить с помощью нескольких классов.

— Стефан Кендалл

@StefanKendall: Иногда вы имеете дело с чужим дерьмом сторонних разработчиков, а иногда поддерживаете устаревшие приложения, которые нельзя быстро исправить. Плохой дизайн - это факт жизни, и это совершенно законный вопрос.

— Nerdmaster

Ответы:

222

Используйте .closest()с селектором:

var $div = $('#divid').closest('div[class^="div-a"]');

— Мэтт Болл
источник

Кстати, не знаю, почему это было отклонено. Селектор префикса класса хрупкий, но он будет работать.

— Мэтт Болл

Для OP: убедитесь, что элемент, который вы ищете, является родительским где-то в дереве DOM, а не является братом или похожим на объект, который вы ищете (согласно документации). Это не «самое близкое место в документе», а «самое близкое по дереву DOM».

— Christian P.

У меня не работает. Кроме того, я хочу найти первый элемент с определенным префиксом, который не обязательно должен быть элементом div.

— Путешествие во времени

@Time затем удалить divселектор элемента: $('#divid').closest('[class^="div-a"]'). Однако, как прокомментировал @Stefan, вам действительно следует использовать несколько классов.

— Мэтт Болл

Этот селектор занимает абсурдное количество циклов (но все же может быть быстрым). Если вам нужно поддерживать IE6, IE7 или IE8, это действительно может вас напугать, если ваш DOM станет слишком большим; IE выдает диалоговое окно «сценарий не отвечает», когда выполняется определенное количество инструкций виртуальной машины JS, а НЕ по прошествии определенного времени. Я видел сценарии, которые завершаются в браузере Internet Explorer за 0,1 мс именно по этой причине.

— Стефан Кендалл

Позже Jquery позволил вам найти родителей с помощью этого .parents()метода.

Поэтому я рекомендую использовать:

var $div = $('#divid').parents('div[class^="div-a"]');

Это дает все родительские узлы, соответствующие селектору. Чтобы получить первого родителя, соответствующего селектору, используйте:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

Для других подобных запросов прохождения DOM ознакомьтесь с документацией по прохождению DOM .

— Санни Р Гупта
источник

Ответ не вводит в заблуждение, он просто демонстрирует другую альтернативу .closest (), .parents () выглядит более читаемым и является еще одним решением проблемы.

— Sunny R Gupta

Самый близкий - лучшее решение, чем это, поскольку самый близкий найдет только первое совпадение, тогда как родители найдут ВСЕ совпадения, идущие вверх по DOM. Очевидно, более эффективно использовать ближайшую, хотя я согласен, что это не лучшая названная функция.

— Mog0

Как ни странно, в итоге я использовал это решение, поскольку .parentsUtil () не работал так, как я ожидал.

— Марк Хэнди