[jquery] jQuery를 사용하여 두 번째 자식 얻기

$(t).html()

보고

<td>test1</td><td>test2</td>

나는 두 번째 검색하려는 td로부터 $(t)객체를. 나는 해결책을 찾았지만 아무것도 효과가 없었다. 두 번째 요소를 얻는 방법에 대한 아이디어가 있습니까?

답변

둘째 아이를 잡아 :

$(t).children().eq(1);

또는 두 번째 아이를 잡으십시오 <td>.

$(t).children('td').eq(1);

답변

다음은 코드에서 더 명확하게 읽을 수있는 솔루션입니다.

순서없는 목록의 두 번째 자식을 얻으려면 :

   $('ul:first-child').next()

보다 정교한 예 :이 코드는 ‘my_list’로 식별 된 UL의 두 번째 하위 요소에 대한 ‘title’속성의 텍스트를 가져옵니다.

   $('ul#my_list:first-child').next().attr("title")

이 두 번째 예에서는 ID가 단일 페이지에 고유해야하므로 선택기 시작시 ‘ul’ 을 중복 제거 할 수 있습니다 . 예제에 명확성을 추가하기 위해 있습니다.

성능 및 메모리 에 대한 참고 사항 에서이 두 예제는 jquery 가 나중에 필터링 해야하는 ul 요소 목록을 저장하지 않으므로 성능이 뛰어납니다 .

답변

어때:

$(t).first().next()

주요 업데이트 :

답이 얼마나 아름답게 보일지에 관계없이 코드 성능에 대해서도 고려해야합니다. 따라서 $(t)변수에 정확히 무엇이 있는지 아는 것도 중요 합니다. 그것의 배열 <TD>또는 그것은이다 <TR>몇 가지와 노드 <TD>s내부 그것? 요점을 더 자세히 설명하려면 <ul>50 <li>명의 자녀가 있는 목록 에서 jsPerf 점수를 참조하십시오 .

http://jsperf.com/second-child-selector

이 $(t).first().next()방법은 지금까지 가장 빠릅니다.

그러나 반면에 <tr>노드 를 가져 와서 하위를 찾고 <td>동일한 테스트를 실행하면 결과가 동일하지 않습니다.

도움이 되길 바랍니다. 🙂

답변

여기에 언급되지 않았지만 CSS 사양 선택기를 사용할 수도 있습니다. 문서를 참조하십시오

$('#parentContainer td:nth-child(2)')

답변

이 시도:

$("td:eq(1)", $(t))

또는

$("td", $(t)).eq(1)

답변

jQuery 메소드를 사용하는 것 외에도 제공 하는 기본 cells콜렉션을 사용할 수 <tr>있습니다.

$(t)[0].cells[1].innerHTML

tDOM 요소 라고 가정하면 jQuery 객체 생성을 무시할 수 있습니다.

t.cells[1].innerHTML

답변

_{아무도 네이티브 JS 방법을 언급하지 않았다는 것은 놀라운 일입니다.}

jQuery없이 :

부모 요소 의 children속성 에 액세스하십시오 . 인덱스로 액세스 할 수있는 자식 요소 의 라이브 HTMLCollection 을 반환합니다 . 두 번째 자녀를 얻으려면 :

parentElement.children[1];

귀하의 경우 다음과 같이 작동 할 수 있습니다 : (예)

var secondChild = document.querySelector('.parent').children[1];

console.log(secondChild); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

또한 CSS3 셀렉터의 조합을 사용 / 수 querySelector()및 활용 :nth-of-type(). 이 경우에는 요소 유형을 지정할 수도 있기 때문에이 방법이 더 나은 경우가 있습니다 td:nth-of-type(2) (예).

var secondChild = document.querySelector('.parent > td:nth-of-type(2)');

console.log(secondChild); // <td>element two</td>