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

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

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

Ссылка на 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. Итак, структура выглядит следующим образом:

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

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

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

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

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

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

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

Ванильный эквивалент 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

—

17 октября 2017 г.

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

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

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

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

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

HTML

 
 
 
 Интернет-магазин
 
 
 
 
 
 
 
 
 
  
 
  500  
 
 
 
 
 
 
 
  
 
  500  
 
 
 
 
 
 
 
  
 
  500  
 
 
 
 
 
 
 
  
 
  500  
 
 
 
 
 
 
 
  
 
  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 
 Подписывайтесь на нас
 
 
 
 Питон
 ASP.NET Core
 MVC
 IoC
 Веб-API
 C #
 TypeScript
 Node.js
 Больше
 ✕
.NET Учебники 
 ASP.NET Core
 ASP.NET MVC
 IoC
 веб-API
 C #
 LINQ
 Учебники по скриптам 
 TypeScript
 AngularJS 1
 Узел.js
 D3.js
 jQuery
 JavaScript
 Другие уроки 
 Питон
 Sass
 Https
 Тесты навыков 
 ASP.NET Core
 ASP.NET MVC
 LINQ
 C #
 веб-API
 IoC
 TypeScript
 Угловой JS
 Node.
No related posts.