Как найти потомка по классу

Как найти потомка по классу

var elements = document.querySelector('.list-group-item');
  <li class="list-group-item">
    <a href="">link</a>
    <div class="filmname">
      filmname
    </div>
  </li>

Как на чистом JavaScript найти дочерний элемент по имени класса, когда в выборке имеем доступ только к родителю

Raz Galstyan's user avatar

Raz Galstyan

8,0381 золотой знак19 серебряных знаков50 бронзовых знаков

задан 19 окт 2017 в 19:48

Dmitry's user avatar

Например так:

var parent = document.querySelector('.list-group-item');
var child = parent.querySelector('.filmname');

console.log(child);
 <li class="list-group-item">
    <a href="">link</a>
    <div class="filmname">
      filmname
    </div>
  </li>

Nicolas Chabanovsky's user avatar

ответ дан 19 окт 2017 в 19:56

Александр Казаков's user avatar

Александр КазаковАлександр Казаков

1,6281 золотой знак18 серебряных знаков38 бронзовых знаков

5

Можно получить все дочерние элементы из пропорции childNodes. А затем пройтись по ним и узнать у кого есть определенный класс.

var elements = document.querySelector('.list-group-item');
var notes = null;
for (var i = 0; i < elements.childNodes.length; i++) {
    if (elements.childNodes[i].className == "filmname") {
      notes = elements.childNodes[i];
      break;
    }        
}
console.log(notes);
<li class="list-group-item">
  <a href="">link</a>
  <div class="filmname">
    filmname
  </div>
</li>

ΝNL993's user avatar

ΝNL993

3,2662 золотых знака9 серебряных знаков26 бронзовых знаков

ответ дан 19 окт 2017 в 19:56

Raz Galstyan's user avatar

Raz GalstyanRaz Galstyan

8,0381 золотой знак19 серебряных знаков50 бронзовых знаков

3

Источник

What would the most efficient method be to find a child element of (with class or ID) of a particular parent element using pure javascript only. No jQuery or other frameworks.

In this case, I would need to find child1 or child2 of parent, assuming that the DOM tree could have multiple child1 or child2 class elements in the tree. I only want the elements of parent

<div class="parent">
    <div class="child1">
        <div class="child2">
        </div>
    </div>
</div>

Asef Hossini's user avatar

asked Apr 30, 2013 at 14:13

Blyde's user avatar

3

If you already have var parent = document.querySelector('.parent'); you can do this to scope the search to parent‘s children:

parent.querySelector('.child')

answered Sep 2, 2016 at 14:33

csch's user avatar

cschcsch

4,4462 gold badges19 silver badges22 bronze badges

1

The children property returns an array of elements, like so:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

There are alternatives to querySelector, like document.getElementsByClassName('parent')[0] if you so desire.

Edit: Now that I think about it, you could just use querySelectorAll to get decendents of parent having a class name of child1:

children = document.querySelectorAll('.parent .child1');

The difference between qS and qSA is that the latter returns all elements matching the selector, while the former only returns the first such element.

jmargolisvt's user avatar

jmargolisvt

5,6824 gold badges27 silver badges45 bronze badges

answered Apr 30, 2013 at 14:15

Rick Viscomi's user avatar

Rick ViscomiRick Viscomi

8,0004 gold badges35 silver badges48 bronze badges

Just adding another idea you could use a child selector to get immediate children

document.querySelectorAll(".parent > .child1");

should return all the immediate children with class .child1

answered Jul 9, 2018 at 14:46

Waleed's user avatar

WaleedWaleed

3493 silver badges6 bronze badges

3

Element.querySelector() is the best way;

const parent = document.querySelector('.parent'); 
// Do anything next //When you want
parent.querySelector('.child1'); // <div class="child1">

jacobkim's user avatar

jacobkim

1,03510 silver badges20 bronze badges

answered Aug 1, 2021 at 1:46

FATCHOLA's user avatar

FATCHOLAFATCHOLA

3832 silver badges4 bronze badges

2

You have a parent element, you want to get all child of specific attribute
1. get the parent
2. get the parent nodename by using parent.nodeName.toLowerCase() convert the nodename to lower case e.g DIV will be div
3. for further specific purpose, get an attribute of the parent e.g parent.getAttribute("id"). this will give you id of the parent
4. Then use document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); if you want input children of the parent node 

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")

Krystian G's user avatar

Krystian G

2,8323 gold badges10 silver badges25 bronze badges

answered Jan 23, 2020 at 21:13

Adio Azeez's user avatar

Источник
  1. Поиск по id
  2. Поиск по тегу
  3. Получить всех потомков
  4. Поиск по name: getElementsByName
  5. Другие способы

Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById, getElementsByTagName и getElementsByName.

Более мощные способы поиска предлагают javascript-библиотеки.

Поиск по id

Самый удобный способ найти элемент в DOM – это получить его по id. Для этого используется вызов document.getElementById(id)

Например, следующий код изменит цвет текста на голубой в div‘е c id="dataKeeper":

document.getElementById('dataKeeper').style.color = 'blue'

Поиск по тегу

Следующий способ – это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag). Она возвращает массив из элементов, имеющих такой тег.

Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li:

document.getElementsByTagName('LI')[1]

Что интересно, getElementsByTagName можно вызывать не только для document, но и вообще для любого элемента, у которого есть тег (не текстового).

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

Например, следующий вызов получает список элементов LI, находящихся внутри первого тега div:

document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')

Получить всех потомков

Вызов elem.getElementsByTagName('*') вернет список из всех детей узла elem в порядке их обхода.

Например, на таком DOM:

<div id="d1">
  <ol id="ol1">
    <li id="li1">1</li>
    <li id="li2">2</li>
  </ol>
</div>

Такой код:

var div = document.getElementById('d1')
var elems = div.getElementsByTagName('*')

for(var i=0; i<elems.length; i++) alert(elems[i].id)

Выведет последовательность: ol1, li1, li2.

Поиск по name: getElementsByName

Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name) равно данному.

Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это form, input, a, select, textarea и ряд других, более редких.

Метод document.getElementsByName не будет работать с остальными элементами типа div,p и т.п.

Другие способы

Существуют и другие способы поиска по DOM: XPath, cssQuery и т.п. Как правило, они реализуются javascript-библиотеками для расширения стандартных возможностей браузеров.

Также есть метод getElementsByClassName для поиска элементов по классу, но он совсем не работает в IE, поэтому в чистом виде им никто не пользуется.

Частая опечатка связана с отсутствием буквы s в названии метода getElementById, в то время как в других методах эта буква есть: getElementsByName.

Правило здесь простое: один элемент – Element, много – Elements. Все методы *Elements* возвращают список узлов.

Источник

In CSS, selectors are patterns used to select the element(s) you want to style, but as you can tell from the title above, selectors are also useful in javascript and below are some examples on how to use them.

Basics

Using a selector in javascript

  • Use the .querySelector method 
const div = document.querySelector("div") // => First occurence of a div element in the document

const p = div.querySelector("p") // => First occurence of a p element in the div

Enter fullscreen mode

Exit fullscreen mode

  • To get all matching elements, use the document.querySelectorAll method 
document.querySelectorAll("div") // NodeList of all div elements

Enter fullscreen mode

Exit fullscreen mode

By IDs

To get an element by its ID, use a # before the element ID 

document.querySelector("#id") // => document.getElementById('id')

Enter fullscreen mode

Exit fullscreen mode

By classes

To get elements by class, use a . before the class name 

document.querySelectorAll(".myElementClass")

Enter fullscreen mode

Exit fullscreen mode

By tag name

To get elements by tag name, just input the tag name 

document.querySelectorAll("body") // => document.getElementsByTagName('body')

Enter fullscreen mode

Exit fullscreen mode

Replicating .getElementById and getElementsByTagName

  • Replicating .getElementById 
document.querySelector("#myDivId") // => document.getElementById('myDivId')

Enter fullscreen mode

Exit fullscreen mode

  • Replicating .getElementsByTagName 
document.querySelectorAll("a") // => document.getElementsByTagName('a')

Enter fullscreen mode

Exit fullscreen mode

All elements

To get all elements use * 

document.querySelectorAll("*") // => NodeList[...]

Enter fullscreen mode

Exit fullscreen mode

Using multiple selectors

To use multiple selectors, we seperate each of them with a ,. 

<html>
    <body>
        <p>Hello i am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelectorAll("p, a") // => NodeList[p,a,a]

Enter fullscreen mode

Exit fullscreen mode

More with elements

In the above examples, we made basic queries, but other things can be done like getting elements by order or parent.

Getting element children

There are two variants of this, one gets an element’s child no matter how deep it is down the tree, and the other gets an element’s direct child. 

<html>
    <body>
        <p>Hello i am a paragraph</p>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <p>
                Hello i am a paragraph and here's
                <a href="https://anotherplace.com">a link</a>
            </p>
        </div>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

With the above HTML as an example, we will look at these two variants.

  • Direct child 
document.querySelector("div > a") // => <a href="https://awesomeplace.com">Hey I am a link</a>

Enter fullscreen mode

Exit fullscreen mode

  • All children 
document.querySelectorAll("div a") // => NodeList[a,a]

Enter fullscreen mode

Exit fullscreen mode

Getting elements by order

There are two ways to do this also. Consider the following HTML. 

<html>
    <body>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <pre>I should intervene but i wont</pre>
            <p>Hello i am another paragraph</p>
        </div>
        <p>Hello i am a paragraph</p>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

  • Placed after 
document.querySelector("div + p") // => <p>Hello i am a paragraph</p>

Enter fullscreen mode

Exit fullscreen mode

  • Preceded by

With ~, it does not matter the element immediately behind matches. 

document.querySelector("a ~ p") // => <p>Hello i am another paragraph</p>

Enter fullscreen mode

Exit fullscreen mode

and we can see that the pre element did not affect the result because it does not matter if the pre was there in the first place. But the following selector will fail because it checks the element immediately above it. 

document.querySelector("a + p") // => null

Enter fullscreen mode

Exit fullscreen mode

Getting elements by attribute

An attribute selector starts with [ and ends with ] and is used as such 

<html>
    <body>
        <p style="color:blue;">Hello i am styled</p>
        <p>Hello i have no style</p>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector("p[style]") // => <p style="color:blue;">Hello i am styled</p>

Enter fullscreen mode

Exit fullscreen mode

Check attribute value

To check an attribute value we use the = symbol. 

<html>
    <body>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector('a[href="https://awesomeplace.com"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>

Enter fullscreen mode

Exit fullscreen mode

More with attribute values

  • Check if attribute starts with… 
document.querySelector('a[href^="https://awesome"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>

Enter fullscreen mode

Exit fullscreen mode

  • Check if attribute ends with… 
document.querySelectorAll('a[href$=".com"]') // => NodeList[a,a]

Enter fullscreen mode

Exit fullscreen mode

  • Check if the attribute contains a substring 
document.querySelectorAll('a[href*="place"]') // => NodeList[a,a]

Enter fullscreen mode

Exit fullscreen mode

Advanced selectors

  • :focus

This selects the element that currently has focus

  • :visited

This is used with a tags and selects links that have been visited

  • :link

This is also used with a tags but in this case, selects links that have not been visited

  • :enabled

This selects elements that are enabled(not disabled) 

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelectorAll(":enabled") // => NodeList[p,p,a,a]

Enter fullscreen mode

Exit fullscreen mode

  • :disabled

This selects elements that have been disabled 

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector(":disabled") // => <button disabled="true"> I have been disabled </button>

Enter fullscreen mode

Exit fullscreen mode

  • :first-child

This selects the element that is the first child of its parent 

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector("p:first-child") // => <p>I am a paragraph</p>

Enter fullscreen mode

Exit fullscreen mode

  • :last-child

This selects the element that is the last child of its parent 

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector("p:last-child") // => <a href="anotherplace.com">I am another link</a>

Enter fullscreen mode

Exit fullscreen mode

  • el:first-of-type

This selects the element that is the first child of its parent and is the same type as el 

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector("a:first-of-type") // => <a href="https://awesomeplace.com">Hey I am a link</a>

Enter fullscreen mode

Exit fullscreen mode

  • el:last-of-type

This selects the element that is the last child of its parent and is the same type as el 

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector("p:last-of-type") // => <p>I am another paragraph</p>

Enter fullscreen mode

Exit fullscreen mode

  • :not(selector)

This selects elements that don’t match the selector 

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector(":not(a)") // => <p>I am a paragraph</p>

Enter fullscreen mode

Exit fullscreen mode

  • :nth-child(n)

This selects the element that is the n th child of its parent. 

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector("div:nth-child(2)") // => <a href="https://awesomeplace.com">Hey I am a link</a>

Enter fullscreen mode

Exit fullscreen mode

  • :nth-last-child(n)

This selects the element that is the n th to the last child of its parent. 

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector("div:nth-last-child(1)") // => <a href="https://anotherplace.com">I am another link</a>

Enter fullscreen mode

Exit fullscreen mode

Mix and match

These selectors can be mixed together to perform some complex checks. e.g

  • A disabled button of class ‘btn’ 
<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
        <button disabled="true">I am disabled</button>
        <button disabled="true" class="btn">I am also disabled</button>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector('button.btn:disabled') // => <button disabled="true" class="btn">I am also disabled</button>

Enter fullscreen mode

Exit fullscreen mode

  • All disabled buttons in a form 
<html>
    <body>
        <form method="POST">
            <input type="text" name="firstname" placeholder="firstname"/>
            <input type="text" name="lastname" placeholder="lastname"/>
            <button disabled="true">Clear inputs</button>
            <button type="submit">Submit</button>
        </form>
        <button disabled="true">I am disabled</button>
        <button disabled="true" class="btn">I am also disabled</button>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelector('form > button:disabled') // => <button disabled="true">Clear inputs</button>

Enter fullscreen mode

Exit fullscreen mode

  • All disabled buttons in a form and all buttons outside it 
<html>
    <body>
        <form method="POST">
            <input type="text" name="firstname" placeholder="firstname"/>
            <input type="text" name="lastname" placeholder="lastname"/>
            <button disabled="true">Clear inputs</button>
            <button type="submit">Submit</button>
        </form>
        <button>I am not disabled</button>
        <button class="btn">I am also not disabled</button>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelectorAll('form > button:disabled, form ~ button') // => NodeList[button, button, button]

Enter fullscreen mode

Exit fullscreen mode

  • All links to external pages 
<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
        <a href="/otherpage.html">I will to the other pages</a>
    </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

document.querySelectorAll('a[href^="https://"]') // => NodeList[a,a]

Enter fullscreen mode

Exit fullscreen mode

And to get links that are not to external pages, use 

document.querySelector('a:not([href^="https://"])') // => <a href="/otherpage.html">I will to the other pages</a>

Enter fullscreen mode

Exit fullscreen mode

Conclusion

These are just some of the ways you can use selectors in javascript and if you want to know more, here is a link to a CSS selector reference on w3c.

Thanks for reading!!!

Источник

В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.

find() – выбор потомков

Нахождение потомков для каждого элемента текущего набора в jQuery выполняется с помощью find().

Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.

Например, выбрать все элементы с классом «carousel-items», расположенные в «.carousel»:

<div class="carousel">
  <div class="carousel-items">
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  <div class="carousel-items">
</div>

<script>
var carousel = $('.carousel');
// выберем потомков с классом carousel-item для элементов набора carousel
var items = carousel.find('.carousel-item');

// пример указания элементов в find посредством ссылки на DOM-элементы
// var elements = document.querySelectorAll('.carousel-item');
// var items = carousel.find(elements);

// с помощью набора jQuery
// var elements = $('.item');
// var items = carousel.find(elements);
</script>

children() – выбор дочерних элементов

Кроме find() в jQuery имеется ещё один похожий метод: children().

children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).

Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:

<div class="message">
  <h3>...</h3>
  <p>...</p>
</div>
<div class="message">
  <h3>...</h3>
  <p>...</p>
</div>

<script>
  const elements = $('.message').children();
</script>

Если необходимо выбрать не все, а только определённые, то можно использовать селектор.

Например, выберем не все элементы, а только <h3>:

const elements = $('.message').children('h3');

closest() – выбор ближайшего предка

В jQuery поиск ближайшего предка (включая сам этот элемент) выполняется с помощью метода closest().

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

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

Например, выбрать <ul> в качестве ближайшего предка для элементов текущего набора:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  // текущий набор
  var elements = $('li.active');
  // выберем ближайших предков по селектору ul для элементов, содержащихся в наборе elements
  var ul = elements.closest('ul');
</script>

next() – выбор следующего элемента

В jQuery получить для каждого элемента набора следующий элемент (при необходимости соответствующий указанному селектору) можно с помощью метода next().

При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.

Например, выберем <li> расположенный после «.active»:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  const element = $('li.active').next('li');
</script>

Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:

const element = $('li.active').next();

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

Например:

const elements = $('li.active').nextAll();

Кроме next() и nextAll() в jQuery имеется ещё nextUntil(). Он позволяет получить все следующие элементы до указанного.

Например, выберем все <li> кроме последнего, расположенные после «.active»:

const elements = $('li.active').nextUntil('li','li:last-child');

prev() – выбор предыдущего элемента

В jQuery кроме методов для выбора следующих элементов имеются аналогичные для получения предыдущих: prev(), prevAll() и prevUntil().

Например:

<div class="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div class="current"></div>
  <div></div>
</div>

<script>
  var prev = $('.current').prev();
</script>

siblings() – выбор сиблингов

Получение сиблингов для каждого элемента набора в jQuery осуществляется с помощью метода siblings().

При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  var elements = $('li.active').siblings();
</script>

parent() – получение родителя

В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent().

При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.

Например, получим родительский элемент для <li> с классом active:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  const elements = $('li.active').parent();
</script>

В jQuery кроме parent() имеется ещё метод parents(). Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков (до <html>).

Например, получим всех предков для <li> с классом active:

<body>
  <ul>
    <li>One</li>
    <li class="active">Two</li>
    <li>Three</li>
  </ul>
  ...

<script>
  const elements = $('li.active').parents(); // <ul>, <body>, <html>
</script>

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

Например, получим предков, соответствующего селектору .one для элемента с классом three:

<div class="one">
  <div class="two">
    <div class="three">...</div>
  </div>
</div>

<script>
  var elements = $('.three').parents('.one');
</script>

Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil():

Например, получим предков являющимися <div> для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container:

<div class="container">
  <div class="one">
    <div class="two">
      <div class="active">...</div>
    </div>
  </div>
</div>

<script>
  var elements = $('.three').parentsUntil('div', '.container');
</script>

offsetParent() – получение ближайшего позиционированного предка

В jQuery для получения ближайшего позиционированного предка можно воспользоваться offsetParent(). Этот метод не принимает никаких аргументов.

Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.

Например, найдём offsetParent для элемента с классом active:

<div class="container">
  <div class="one" style="position: relative;">
    <div class="two">
      <div class="active">...</div>
    </div>
  </div>
</div>

<script>
  var elements = $('.active').offsetParent();
</script>

contents() – выбрать все дочерние узлы

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

Этот метод не принимает никаких аргументов.

.contents() и .children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.

Метод .contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.

Начиная с jQuery 3.2, .contents() также возвращает содержимое <template> элементов.

Источник

Добавить комментарий