Jquery find parent: javascript — How to find a parent with a known class in jQuery?

Содержание

jquery parent parents и closest или как получить предка по его номеру

Доброго дня. Небольшая заметка о том, как можно получить родителя элемента по его порядковому номеру в дереве родителей.

В jquery есть несколько способов получения родителей элементов :parent, parents, closest

parent — возвращает прямого родителя, это один элемент, как параметр может получать селектор. Тогда метод возвращает родителя только если родительский селектор совпадает с тем, что подается в качестве параметра.

Для примера, будем препарировать такой синтетический кусок HTML


<div>
	<strong>
		<span>
			<div>1</div>
		</span>
	</strong>
</div>

для начала без параметра


alert($('#id1').parent()[0].tagName)// вернет span, все ок

все работает, теперь так 


alert($('#id1').parent('div')[0].tagName)// вернет undefined, совпадений нет

метод parents — как понятно из названия вытягивает всех родителей элемента, опять же если задан селектор то только тех родителей, чьи данные подходят под этот селектор


alert($('#id1').parents()[0].tagName)// вернет span

собственно для чего писалась заметка, обратиться к n-ому родителю можно так


alert($('#id1').parents()[2].tagName)// вернет div

что эквивалентно 


alert($('#id1').parent().parent().parent()[0].tagName)// вернет div

однако индекс массива не очень подходит для этих целей, так как мы привыкли работать с jquery объектами поэтому делаем так


alert($('#id1').parents().eq(2).html())// вернет все содержимое корневого div

удобней чем писать кучу parent().parent().parent()

Однако при задании селектора, нужно помнить, что индекс элементов изменится


alert($('#id1').parents('div').eq(0).html())// вернет все содержимое корневого div

closest  отличается от  parents тем, что возвращает лишь один элемент, а обход начинается не с родителя, а с самого себя


alert($('#id1').closest('div').html())// вернет все содержимое самого элемента, эквивалентно $('div#id1').html() 

а вызов closest без параметра, возвращает сам элемент, если Вам нужен именно второй div, используйте parents(‘div’).eq(0), как описано выше

Замечу, все же, что jquery так устроен, что  


alert($('#id1').parents('div').html())//тоже вернет все содержимое корневого div

однако, так делать не следует.

Желаю удачи

Рассказать друзьям

Метод parent и children библиотеки jQuery – Zencoder

Два метода-антагониста, принцип работы которых ясен из имени самих методов.

Метод children

Метод возвращает все элементы, которые являются дочерними по отношению к элементу, указанному в качестве аргумента метода.

Примеры использования:

  • — вернет элементы, которые лежат непосредственно внутри div-элементов
  • 1
    
    $('div').children('.block')
    
    — вернет элементы класса , которые лежат непосредственно внутри div-элементов
  • 1
    
    $('#area').children('.block') - вернет элементы класса .
    
    block
    1
    
    , которые лежат непосредственно внутри элемента с идентификатором 
    
    #area`

Метод в чем-то похож на метод , рассмотренный мною ранее. Но между двумя этими методами существует одно большая разница.

Метод возвращает (другими словами — ищет) все элементы, расположенные на DOM-уровне ниже указанного элемента; и только на этом уровне. Другими словами — возвращаются все непосредственные children-элементы.

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

Метод parent

Метод возвращает все элементы, являющиеся непосредственными родителями элемента(ов), указанных в качестве аргументов данного метода.

Примеры использования:

  • — вернет родителя элемента с идентификатором
  • — вернет родительские элементы всех div-ов
  • 1
    
    $('div').parent('.block')
    
    — вернет элементы класса , которые являются родительскими для div-элементов на странице

На этом все.


jqueryparentchildren

Обход элементов в jQuery — Потомки

Перейти к основному содержанию
  • Самоучители
    • HTML для начинающих
    • CSS для начинающих
    • Учебник HTML5
    • Учебник Canvas
    • XML для начинающих
    • Учебник XML DTD
    • Учебник по XML схемам
    • Учебник XML DOM
    • Учебник XPath
    • Учебник по XSLT
    • Учебник SVG
    • Учебник JavaScript
    • Учебник jQuery
  • Справочники
    • HTML теги
    • CSS свойства

jQuery: поиск элементов | Конспект JS-course

  • Конспект JS-course
  • Конспект JS-course
  • 1. Операторы, приведение типов, ветвление
    • 1.1. Основные операторы
    • 1.2. Выражения и операторы
    • 1.3. Приоритеты операторов
    • 1.4. JavaScript Garden. Типы

HTML DOM свойство parentNode

Элемент Объект

Пример

Получить имя родительского узла элемента

  • :

    var x = document.getElementById («myLI»). parentNode.nodeName;

    Попробуй сам »

    Дополнительные примеры «Попробуйте сами» ниже.


    Определение и использование

    Свойство parentNode возвращает родительский узел указанного узла как объект узла.

    Примечание: В HTML сам документ является родительским узлом элемента HTML, HEAD и BODY — дочерними узлами элемента HTML.

    Это свойство доступно только для чтения.


    Поддержка браузера

    Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

    Объект
    parentNode 1,0 Есть 1,0 Есть Есть


    Синтаксис

    Технические характеристики

    Возвращаемое значение: Объект узла, представляющий родительский узел узла, или null , если узел не имеет родительского узла
    Версия DOM Базовый объект-узел уровня 1

    Другие примеры

    Пример

    Щелкните элемент (), чтобы скрыть его родительский узел (

    ):


    x

    Попробуй сам »

    Связанные страницы

    Ссылка на HTML DOM: узел . Свойство childNodes

    Ссылка на HTML DOM: узел . firstChild Property

    Ссылка на HTML DOM: узел . lastChild Недвижимость

    Ссылка на HTML DOM: узел . следующийСобственный объект недвижимости

    Ссылка на HTML DOM: узел . предыдущийСобственность близнецов

    Ссылка на HTML DOM: узел . Свойство nodeName

    Ссылка на HTML DOM: узел . Свойство parentElement


    Элемент Объект


    jQuery $.parent и $ .parents методы по сравнению с 4 примерами

    Назначение родительского метода в jQuery

    Методы $ .parent и $ .parents jQuery используются для перемещения вверх по структуре DOM для указанного элемента.

    Разница между этими двумя методами заключается в том, что родительский метод проходит только один уровень вверх, в то время как метод jQuery родителей перемещается по всем предкам указанного элемента или селектора.

    После поиска элементов вы можете выполнить определенные действия, такие как добавление CSS, удаление или изменение стиля, добавление текста и т. Д.

    Чтобы понять использование и разницу между двумя методами, см. Примеры ниже, где я использовал разные элементы, но до этого синтаксис для использования этих методов.

    Синтаксис методов $ .parent и $ .parents

    Вот как можно использовать метод $ .parent:


    Просто замените parent на parent в синтаксисе выше, чтобы перемещаться по всем предкам:

    $ («детский»).родители();


    Пример понимания метода родителей и родителей

    В этом примере создается элемент div с базовыми свойствами CSS, такими как граница. Внутри div создается абзац дочернего элемента. Внутри абзаца создается элемент span. Итак, структура выглядит следующим образом:

    Div text

    Текст абзаца

    Span text


    Теперь давайте разберемся, как работает jQuery $.Методы parent и $ .parents работают, даны две кнопки. Первая кнопка «Execute $ .parent» запускает родительский метод jQuery. А другой выполнит метод $ .parents.

    Посмотрите демонстрацию в Интернете, и я объясню, что делать после этого.

    Посмотреть онлайн-демонстрацию и код

    На рисунке и на демонстрационной странице вы можете увидеть разницу после однократного нажатия кнопок. Метод $ .parent добавил данный текст только в тег .С другой стороны, когда вы щелкали «Выполнить метод $ .parents», он добавлял текст во всех предков.

    Единственное различие в коде двух кнопок — метод родительский и родительский .

    Код кнопки родительской $:

    $ («# parent_btn»). Click (function () {

    $ («# parent_demo»). Parent (). Append («Демонстрация jQuery
    «);

    }) ;


    Родители $ код кнопки :

    $ («# parent_btn»).click (function () {

    Ванильный эквивалент JS общих функций jQuery

    Вот обычные (простые) версии Javascript некоторых распространенных функций jQuery. Я собрал эту шпаргалку, когда рефакторинг некоторого старого кода нуждался в чтобы удалить jQuery из моего кода.

    Выбор и $ .find ()

    Используйте querySelector (или querySelectorAll ).

     
    var el = $ ('. привет');
    
    
    const el = document.querySelector ('. привет');
    
    
    $ (эл).найти ('ввод');
    
    
    el.querySelector ('ввод');  

    $ .prop ()

    Просто используйте или установите атрибут напрямую:

     
    var $ el = $ ('. форма');
    $ el.find ('. input'). prop ('отключено', истина)
    
    
    const el = document.querySelector ('. form');
    el.querySelector ('. input'). disabled = истина;  

    $ .parent ()

    Использовать parentElement

     
    var $ parent = $ ('. ребенок'). parent ();
    
    
    const parent = document.querySelector ('. child'). parentElement;  

    $.данные ()

    Используйте .dataset

      
    var info = $ ('. info'). data ('некоторые-данные'); const info = document.querySelector ('. info'). dataset.someData;

    Обратите внимание, что набор данных преобразует имена из hypenated в camelCase, аналогично тому, как CSS обрабатывается в JS.

    $. Удалить ()

    Используйте .remove (). Это не будет работать ни в одной версии Internet Explorer , но существует в Edge, поэтому для IE можно использовать removeChild .

     
    $ ('. goAway'). remove ();
    
    
    const el = document.querySelector ('. goAway'). remove ();  

    $ .addClass () / $ .removeClass () / $ .toggleClass () / $ .hasClass ()

    Использовать список классов

     
    $ ('. активен'). removeClass ('активен');
    $ ('. домашняя страница'). addClass ('активен');
    $ ('. домашняя страница'). toggleClass ('активен');
    $ ('. домашняя страница'). hasClass ('активен');
    
    
    document.querySelector ('. is-active'). classList.remove ('is-active');
    document.querySelector ('. домашняя страница').classList.add ('активен');
    document.querySelector ('. домашняя страница'). classList.toggle ('активен');
    document.querySelector ('. homepage'). classList.contains ('is-active');  

    $ .show () / $ .hide ()

    Измените свойство CSS display:

     
    $ ('. hideMe'). hide ();
    $ ('. showMe'). шоу ();
    
    
    document.querySelector ('. hideMe'). style.display = 'none';
    
    
    document.querySelector ('. showMe'). style.display = 'наследовать';  

    $. Пусто ()

    Перебрать дочерние элементы элемента и удалить их.

     
    $ ('. контент'). пустой ();
    
    
    const el = document.querySelector ('. content');
    
    
    while (el.firstChild) {
        el.removeChild (this.el.firstChild);
    }
    
    
    
    el.innerHTML = '';  

    $ .append ()

    Это немного сложно! Есть три варианта:

    1. appendChild : создайте элемент, добавьте к нему содержимое, а затем добавьте к родительскому элементу.
    2. innerHTML : Немедленно добавляет HTML, но удаляет все существующее содержимое и обработчики событий.Не рекомендуется.
    3. DOMParser : IE10 +, может обрабатывать сложные шаблоны и вложенную разметку из строки.

    Vanilla .append () просто добавит строку, а не разметку.

     
    $ ('. el'). append ('
    привет
    '); пусть сначала = document.createElement ('p'); first.innerHTML = 'привет'; el.appendChild (первый); this.innerHTML = '
    привет
    '; var markup = '

    текст здесь

    '; var parser = новый DOMParser () var content = parser.parseFromString (разметка, 'текст / HTML'); el.appendChild (контент [0]);

    2 способа получить дочерние элементы с помощью JavaScript

    Raymon S

    В jQuery очень легко получить дочерние элементы родительского элемента HTML. Но знаете ли вы, как это работает с ванильным JavaScript?

    Сегодня я хочу показать вам два способа использования ванильного JavaScript для получения дочерних элементов, даже если вы не знаете, что находится в родительском элементе.

    Если вам нравится читать, а не смотреть видео? Прокрутите вниз, чтобы продолжить чтение.

    Ищете видео ресурсы? Прокрутите вниз!

    Начнем с простой страницы интернет-магазина.

    HTML
     
     

    Интернет-магазин

     Food

    500

     Food

    500

     Food

    500

     Food

    500

     Food

    500

    Как вы заметили, я использовал БЭМ в качестве наименования соглашение для моей страницы примера интернет-магазина.

    # 1 element.children

    Первый способ получить дочерние элементы — использовать element.children. Если вы хотите проверить, какие свойства имеет объект элемента DOM, проверьте его на W3schools. Это, кстати, один из моих любимых веб-сайтов, на которых я могу проверить примеры и документацию по JavaScript.

    JavaScript
     
     

    var productList = document.querySelector ('. Product__list'). Children;

    console.log ('productList:', productList);

    В журнале консоли вы найдете файл. HTMLCollection Проверьте свойство __proto__ , вы обнаружите, что он не является массивом.

    Цикл по дочерним элементам

    Свойство children вернет a. HTMLCollection Итак, вы можете перебрать его с помощью старого простого цикла For-loop.

     
     

    для (i = 0; i & lt; productList.length; i ++) {

    console.log ('productList [i]:', productList [i]);

    }

    Посмотрите мой пример element.children jsbin.

    # 2 document.querySelectorAll

    Если вы знаете, какие элементы находятся в родительском элементе, вы можете настроить селектор на: .product__list .product__item С помощью этого селектора вы нацеливаете все элементы продукта внутри списка продуктов.

    Если вы не знаете, какие элементы входят в состав родительского элемента, я бы порекомендовал этот элемент.детский путь. Потому что тогда вы обязательно вернете всех детей.

    Может быть, вы напоминаете запрос querySelectorAll из моего предыдущего сообщения в блоге, но я не против показать его снова.

    JavaScript
     
     

    var productList = document.querySelectorAll ('. Product__list .product__item');

    console.log ('productList:', productList);

    В журнале консоли вы найдете NodeList. Если вы проверите __proto__ , вы обнаружите, что он не является массивом.

    Так же, как HTMLCollection, вы можете использовать цикл For для перебора каждого элемента в NodeList.

     
     

    для (i = 0; i & lt; productList.length; i ++) {

    console.log ('product:', productList [i]);

    }

    Посмотрите мой пример querySelectorAll jsbin.

    Заключение: element.children VS querySelectorAll

    Но теперь вопрос, какой из них вы используете?

    Вы знаете дочерние элементы

    Если вы знаете, какие дочерние элементы есть в родительском элементе, рекомендуется использовать документ .querySelectorAll метод.

    Это гораздо более быстрый способ нацеливания на них с помощью селектора CSS. А из-за querySelectorAll не имеет значения, сколько там элементов.

    Вы не знаете дочерние элементы

    В случае, если вы не знаете, какие дочерние элементы вам следует ожидать, вам понадобится. element.children Все элементы внутри родительского элемента вернутся с объектом элемента DOM.

    Найти другие сообщения JavaScript

    Видеоресурсы

    Если у вас есть какие-либо вопросы или вам нужна помощь, оставьте их в комментариях или присоединитесь к нашей группе Free Mr Frontend на Facebook!

    Если вам нравятся мои блоги и видео, и вы хотите продолжать смотреть это? Пожалуйста, поддержите меня на Patreon! Ваша поддержка поможет мне оплатить мой веб-хостинг и домен 🙏.

    Jquery находит родительский узел с классом kitab — kitaplar

    Jquery находит родительский узел с классом kitab — kitaplar — Jquery находит родительский узел с классом ile ilgili kitaplar.
    Yemine gerek grmeyecek kadar szlerine sadk ol. ДЕЙЛ КАРНЕГ [Пайла]

    Bölümler
    Эдебият Дефтери
    • Kurallar
    • Yardım
    • İletişim
    Diğer
    • Edebiyat TV
    • Kütüphane
    • Burçlar
    • Bebek isimleri
    Dier
    • Ря Табирлери,
    • simler
    Edebiyatdefteri.com, 2020. Bu sayfada yer alan bilgilerin her hakk, aksi ayrca belirtilmedii srece Edebiyatdefteri.com’a aittir. Sitemizde yer alan iir ve yazlarn telif haklar air ve yazarlarn kendilerine veya yeya verdikleri kiilere aittir. Sitemiz привет бир ekilde kr amac gtmemektedir ve sitemizde yer alan tm materyaller yalnzca bilgilendirme ve eitim amacyla sunulmaktadr.

    Sitemizde yer alan iirler, ykler ve diğer eserlerin telif hakları yazarların kendilerine veya butki verdikleri kişilere aittir. Eserlerin izin alınmadan kopyalanması ve kullanılması 5846 sayılı Fikir ve Sanat Eserleri Yasası na göre suçtur.Ayrca sitemiz Telif Haklar kanuna gre korunmaktadr. Herhangi бир zelliinin ksmende olsa kullanlmas ya da kopyalanmas sutur. Эдебият — iirler — Китап

    селекторов jQuery

    • Подписывайтесь на нас