jQuery first 타입 선택기?

jQuery와 함께 다음 <div>에서 첫 번째 <p> 요소를 어떻게 선택합니까? 첫 번째 p 항상 div의 직접적인 자식 경우jQuery first 타입 선택기?

$(yourDiv).find("p").eq(0);

, 당신은 children 대신 find 사용할 수 있습니다 당신을 가정

<div> 
    <h1>heading</h1> 
    <p>How do I select this element with jQuery?</p> 
    <p>Another paragraph</p> 
</div>

출처

2011-12-16 Web_Designer

이미 div에 대한 참조를 가지고있다.

일부 대안은 다음과 같습니다 eq 방법은 항상이 작업을 수행하는 가장 빠른 방법이 될 것입니다

$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method 
$(yourDiv).find("p:first"); 
$(yourDiv).find("p").first() //Just an alias for `.eq(0)`

참고.

enter image description here

출처

2011-12-16 07:42:24

니스를 설명하는 예입니다,이 설득력 보이는, 감사합니다! –

아무런 문제없이 도움이 될 수있어서 기쁩니다 :) 관심이 있다면, 또 다른 대안은': lt (1)'입니다. 나는'.eq' 메소드가 느려지는 것을 거의 확신하지만, 같은 것을 성취하는 또 다른 방법이다. –

와우, 그것은 중요한 차이입니다. jQuery가 허용하는 이유를 이해할 수 없습니다.백그라운드에서 nth-child (1)로 변환되어야합니다. http://jsperf.com/jq-first-vs-eq/3 이것이 완료되지 않은 이유가 있습니까? – rkw

$('div p:first')

대답은 너무했다 : 여기에서 a를 eq 방법, :eq 선택의 quick comparison 및 :first 선택 (이 eq(0) 단지 별칭 이후 나는 first 방법 귀찮게하지 않았다)의 결과입니다 이 쓸데없는 문장없이 짧은 게시.

확실히 느린 옵션입니다. Jame의 속도 테스트를 살펴본 후 jQuery 선택기가 CSS 선택기를 피킹하면 가장 잘 작동하는 것처럼 보입니다.

출처

2011-12-16 07:42:43 rkw

@JamesAllardice 둘 다 하나의 단일 요소와 일치하기 때문에 .First()와 같습니다. 원하는 효과는 Web_Designer의 도전에 달려 있습니다. – Colin

@Farrell - 네,'.first'와': first'와': eq (0)'과': lt (1)'(같은 일을 jQuery로 작성하는 방법이 많이 있습니다) 그것은 무리의 금식해야합니다. –

@rkw -': nth-child'는 동등하지 않으므로이 경우에는 작동하지 않습니다. Selectors는 CSS를 사용할 때 가장 잘 작동한다고 생각합니다. 특히 현대 브라우저에서는 Sizzle 대신 네이티브'querySelector' 및'querySelectorAll' 메소드를 사용할 수 있습니다. –

$('div p').first()

작동해야합니다. 나는 생각한다.

출처

2011-12-16 07:42:47 bdares

$ ("div p"). first();

또는 $ ('div p : first');

참조 : http://api.jquery.com/first/이

먼저()는 단일 요소와 일치 명심는 : 첫째 아이의 선택은 하나 이상을 일치시킬 수 있습니다 : 각 부모에 대한 하나.

출처

2011-12-16 07:43:36 Colin

거의 답을 알 수 있습니다 (게시물 제목에서). :first-of-type이라는 jQuery의 셀렉터가 있습니다. 과 같이 찾아 자동으로 첫 번째 p 태그에 클래스를 추가하는 데 사용

$("div p:first-of-type").addClass('someClass');

출처

2013-05-05 05:28:06 Devner

: first-of-type 및 last-of-type은 jQuery 1.9 이후 사용 가능합니다. – Bell

-1

이 @Denver는 지적하고 변경으로 위의 코드는 사업부의 첫 번째 단락을 발견

$("div p:first-of-type").css("font-size: 10px");

작동합니다 그 fonts-size 여기

10px에 더욱 약 jQuery first-of-type selector

출처

2015-10-26 09:51:21 Packer

아니요, 그렇지 않아야합니다. 이 대답은 본질적으로 잘못된 요소를 선택하기 위해 변경했다는 것을 제외하고 [Devner가 2 년 반 전에 제공 한 것]과 동일합니다 (http://stackoverflow.com/a/16381687/19068). – Quentin

동의! 코드를 편집했습니다. 감사 – Packer

jQuery first 타입 선택기?

답변

관련 문제