jQuery
Перемещение DOM

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

Чтобы выбрать дочерние элементы элемента, вы можете использовать метод children() .

<div class="parent">
    <h2>A headline</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Praesent quis dolor turpis...</p>
</div>

Измените цвет всех .parent элементов элемента .parent :

$('.parent').children().css("color", "green");

Метод принимает необязательный аргумент selector который может использоваться для фильтрации возвращаемых элементов.

// Only get "p" children
$('.parent').children("p").css("color", "green");

Итерирование списка элементов jQuery

Когда вам нужно перебрать список элементов jQuery.

Рассмотрим эту структуру DOM:

<div class="container">
    <div class="red one">RED 1 Info</div>
    <div class="red two">RED 2 Info</div>
    <div class="red three">RED 3 Info</div>
</div>

Чтобы напечатать текст, присутствующий во всех элементах div с классом red :

$(".red").each(function(key, ele){
    var text = $(ele).text();
    console.log(text);
});

Подсказка: key - это индекс элемента div.red мы сейчас итерируем, внутри его родителя. ele является HTML элемент, так что мы можем создать объект JQuery из него с помощью $() или jQuery() , например так: $(ele) . После этого мы можем вызвать любой метод jQuery для объекта, например css() или hide() и т. Д. В этом примере мы просто вытягиваем текст объекта.

Выбор братьев и сестер

Чтобы выбрать братьев и сестер элемента, вы можете использовать метод .siblings() .

Типичный пример, в котором вы хотите изменить братьев и сестер элемента, находится в меню:

<ul class="menu">
    <li class="selected">Home</li>
    <li>Blog</li>
    <li>About</li>
</ul>

Когда пользователь нажимает на элемент меню, selected класс должен быть добавлен к элементу щелчка и удален из его братьев и сестер :

$(".menu").on("click", "li", function () {
    $(this).addClass("selected");
    $(this).siblings().removeClass("selected");
});

Метод принимает необязательный аргумент selector , который можно использовать, если вам нужно сузить типы братьев и сестер, которые вы хотите выбрать:

$(this).siblings("li").removeClass("selected");

ближайший () метод

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

HTML

<div id="abc" class="row">
    <div id="xyz" class="row">
    </div>
    <p id="origin">
      Hello
    </p>
</div>

JQuery

var target = $('#origin').closest('.row');
console.log("Closest row:", target.attr('id') );

var target2 = $('#origin').closest('p');
console.log("Closest p:", target2.attr('id') );

ВЫХОД

"Closest row: abc"
"Closest p: origin"

first (): первый метод возвращает первый элемент из согласованного набора элементов.

HTML

<div class='.firstExample'>
   <p>This is first paragraph in a div.</p>
   <p>This is second paragraph in a div.</p>
   <p>This is third paragraph in a div.</p>
   <p>This is fourth paragraph in a div.</p>
   <p>This is fifth paragraph in a div.</p>
</div>

JQuery

var firstParagraph = $("div p").first();
console.log("First paragraph:", firstParagraph.text());

Выход:

First paragraph: This is first paragraph in a div.

Получить следующий элемент

Чтобы получить следующий элемент, вы можете использовать метод .next() .

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

Если вы стоите на элементе «Анна» и хотите получить следующий элемент «Пол», метод .next() позволит вам это сделать.

// "Paul" now has green text
$(".anna").next().css("color", "green");

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

// Next element is a "li", "Paul" now has green text
$(".anna").next("li").css("color", "green");

Если следующий элемент не относится к selector типа, возвращается пустой набор, и модификации ничего не сделают.

// Next element is not a ".mark", nothing will be done in this case
$(".anna").next(".mark").css("color", "green");

Получить предыдущий элемент

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

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

Если вы стоите на элементе «Анна» и хотите получить предыдущий элемент «Марк», метод .prev() позволит вам это сделать.

// "Mark" now has green text
$(".anna").prev().css("color", "green");

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

// Previous element is a "li", "Mark" now has green text
$(".anna").prev("li").css("color", "green");

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

// Previous element is not a ".paul", nothing will be done in this case
$(".anna").prev(".paul").css("color", "green");

Отфильтровать выделение

Чтобы отфильтровать выделение, вы можете использовать метод .filter() .

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

HTML-код

Это HTML, который мы будем использовать.

<ul>
    <li class="zero">Zero</li>
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
</ul>

селектор

Фильтрация с использованием селекторов - один из самых простых способов фильтрации выбора.

$("li").filter(":even").css("color", "green"); // Color even elements green
$("li").filter(".one").css("font-weight", "bold"); // Make ".one" bold

функция

Фильтрация выделения с использованием функции полезна, если невозможно использовать селектор.

Функция вызывается для каждого элемента в выборе. Если он вернет true значение, то элемент будет добавлен в возвращаемый выбор.

var selection = $("li").filter(function (index, element) {
    // "index" is the position of the element
    // "element" is the same as "this"
    return $(this).hasClass("two");
});
selection.css("color", "green"); // ".two" will be colored green

элементы

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

var three = document.getElementsByClassName("three");
$("li").filter(three).css("color", "green");

выбор

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

var elems = $(".one, .three");
$("li").filter(elems).css("color", "green");

метод find ()

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

HTML

     <div class="parent">
        <div class="children" name="first">
            <ul>
                <li>A1</li>
                <li>A2</li>
                <li>A3</li>
            </ul>
        </div>
        <div class="children" name="second">
            <ul>
                <li>B1</li>
                <li>B2</li>
                <li>B3</li>
            </ul>
        </div>
       </div>

JQuery

 $('.parent').find('.children[name="second"] ul li').css('font-weight','bold');

Выход

• A1
• A2
• A3

• B1
• Би 2
• B3