programing

jQuery를 사용하여 둘째 자녀 가져오기

closeapi 2023. 10. 18. 22:06
반응형

jQuery를 사용하여 둘째 자녀 가져오기

$(t).html()

돌아온다

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

나는 두번째를 되찾고 싶습니다.td로부터$(t)물건.해결책을 찾아봤지만 아무것도 효과가 없었습니다.두 번째 원소를 얻는 방법을 알고 있습니까?

둘째 아이를 잡습니다.

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

아니면, 둘째 아이를 잡으세요.<td>:

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

및 에 대한 설명서를 참조하십시오.

여기서 언급한 것은 못 봤는데 CSS 스펙 셀렉터를 사용할 수도 있습니다.문서 참조

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

어때요?

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

주요 업데이트:

정답이 얼마나 아름다운지와 별개로, 코드의 성능에 대해서도 생각해 보아야 합니다.따라서 정확하게 무엇이 있는지를 아는 것도 중요합니다.$(t)변수.그것은 그것의 배열입니까?<TD>아니면.<TR>여러 개의 마디를 가진<TD>s그 안에?포인트를 자세히 설명하기 위해서는 a의 jsPerf 점수를 참조하십시오.<ul>50개로 목록을 작성하다<li>어린이:

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

$(t).first().next()방법이 여기서 가장 빠릅니다.

하지만, 반대로, 당신이 그것을 사용한다면,<tr>node and find the<td>아이들과 같은 테스트를 실행하면 결과가 같지 않을 것입니다.

도움이 되길 바랍니다.:)

코드로 읽기에 더 명확한 해결책은 다음과 같습니다.

순서 없는 목록의 두 번째 자식을 가져오는 방법:

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

그리고 좀 더 구체적인 예는.이 코드는 'my_list'로 식별된 UL의 두 번째 자식 요소의 'title' 속성의 텍스트를 가져옵니다.

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

이 두 번째 예에서는 ID가 단일 페이지에 고유해야 하므로 중복되므로 선택기 시작 부분에서 'ul'을 제거할 수 있습니다.그것은 단지 사례에 명확성을 더하기 위해 거기에 있습니다.

성능메모리에서 이 두 가지 예는 성능이 우수합니다. 이는 jquery가 나중에 필터링해야 하는 ul 요소 목록을 저장하도록 만들지 않기 때문입니다.

시도해 보기:

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

아니면

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

jQuery 메서드를 사용하는 것 외에도 native를 사용할 수 있습니다.cells그가 수집한.<tr>당신을 줍니다.

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

가정하에t는 DOM 요소이므로 jQuery 객체 생성을 우회할 수 있습니다.

t.cells[1].innerHTML

어느 누구도 토종 JS의 방법을 언급하지 않았다는 것이 놀랍습니다.

jQuery 미포함:

상위 요소의 속성에 액세스하기만 하면 됩니다.인덱스로 액세스할 수 있는 하위 요소의 실시간 HTML 모음을 반환합니다.둘째 아이를 가지려는 경우:

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 셀렉터 / 를 조합하여 사용할 수도 있습니다.이 경우 요소 유형을 지정할 수도 있으므로 경우에 따라 이 방법이 더 효과적일 수 있습니다.td:nth-of-type(2) (example)

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

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

사용하다.find()방법

$(t).find("td:eq(1)");

td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1. //1 denote second element

jQuery에서는 아래와 같이 두 가지 방법을 사용할 수 있습니다.

jQuery:nth-child Selector 사용 두 번째 li 요소를 선택할 때 요소의 위치를 인수(2)로 지정했습니다.

$( "ul li:nth-child(2)" ).click(function(){
  //do something
});

jQuery :eq() Selector 사용

정확한 요소를 얻으려면 항목의 인덱스 값을 지정해야 합니다.목록 요소는 색인 0으로 시작합니다.li의 두 번째 원소를 선택하려면 2를 인수로 사용해야 합니다.

$( "ul li:eq(1)" ).click(function(){
  //do something
});

예제 참조:jQuery에서 목록의 두 번째 자식 요소 가져오기

언급URL : https://stackoverflow.com/questions/4727263/get-second-child-using-jquery

반응형