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').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 는 현재 부모 내에서 iterating중인 div.red 요소의 인덱스입니다. ele 는 HTML 요소이므로 $() 또는 jQuery() 사용하여 $(ele) 와 같은 jQuery 객체를 만들 수 있습니다. 이후, 우리는 css() 나 hide() 와 같은 객체상의 모든 jQuery 메소드를 호출 할 수 있습니다.이 예제에서 우리는 객체의 텍스트를 가져옵니다.

형제 선택

항목의 형제를 선택하려면 .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");

closest () 메소드

요소에서 시작하여 DOM 트리를 가로 지르는 selector와 일치하는 첫 번째 요소를 반환합니다.

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>

"Anna"요소에 서서 다음 요소 인 "Paul"을 얻으려면 .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>

"Anna"요소에 서서 이전 요소 인 "Mark"를 얻으려면 .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
• B2
• B3