자식 인덱스를 가져 오는 Jquery index() 메서드

Question

쿼리 인덱스() 메서드를 사용하여 해당 부모를 기준으로 요소의 인덱스를 가져옵니다. 코드 1

<div id="check1"> 
    <p> 
     <span> 
      <b> Bold Line 1 </b> 
      <b> This is line2 </b> 
     </span> 
    </p> 
    <p> Should have index 1 </p> 
</div> 

CODE2 CODE2에서

<div id="check2"> 
    <p> 
     <span> 
      <b> Bold Line 1 </b> 
      **<p> This is line2 </p>** //replaced <b> with <p> 
     </span> 
    </p> 
    <p> Should have index 1 </p> 
</div> 

, 난 그냥 p 태그 이름으로 2 대담한 이름을 대체 :

여기에 두 개의 코드입니다.

이 두 가지 경우 모두 의심 지역이 다릅니다. 답변은 다음과 같습니다

Case1: index comes 1 
Case2: index comes 3 

이를 확인하시기 바랍니다. "색인 1을 가져야 함" http://jsfiddle.net/blunderboy/U73VV/

두 개의 검사에서 "This is line2"를 클릭하면 부모가 달라집니다. check1에서 parent는 span이고 check2에서는 div가 div입니다.

tagName을 변경하여 어떤 차이점이 있는지 알려주세요. 부모와의 상대적인 위치는 여전히 동일합니다.

Answer 1

<p/> 태그를 <p/> 태그 안에 넣을 수 없습니다. 다음과 같은 마크 업 결말됩니다

<div id="check2"> 
    <p> 
    <span> 
     <b> Bold Line 1 </b> 
    </span> 
    </p> 
    <p> This is line2 </p> 
    <p> Should have index 1 </p> 
</div> 

당신은 레이아웃을 유지하는 대신 <span/>로 <b/>을 대체 할 수 있습니다.

원하는 경우 태그의 bold 속성을 변경하는 것이면 CSS를 사용할 수 있습니다. 이렇게하면 레이아웃을 망칠 필요가 없습니다.

<div id="check1"> 
    <p> 
    <span> 
     <!-- This is bold --> 
     <span class="bold"> Bold Line 1 </span> 
     <!-- This one is not bold --> 
     <span> This is line2 </span> 
    </span> 
</p> 
<p> Should have index 1 </p> 

내 마크 업 대신 @Alexander의 예를 살펴뿐만 아니라 무효라고 볼

Answer 2

ivalid 마크 업과 관련이 있습니다. 귀하의 중첩 된 <p> 태그를 사용할 수 없습니다. 케이스 2를 이렇게 바꾸면 작동합니다.

<div id="check2"> 
    <div> 
     <span> 
      <b> Bold Line 1 </b> 
      **<p> This is line2 </p>** //replaced <b> with <p> 
     </span> 
    </div> 
    <p> Should have index 1 </p> 
</div> 

나는 왜 색인을 변경하는지 모르지만 마크 업이 유효하지 않음을 알고 있습니다.