Jquery index（）方法獲取子索引

Question

我正在使用query index（）方法獲取元素相對於其父元素的索引。

這裏有兩個代碼： 代碼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> 

代碼2

<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> 

在CODE2，我只是換成p標籤名稱的第二個大膽的名稱。

懷疑區域在這兩種情況下都是不同的。 答案是：

Case1: index comes 1 
Case2: index comes 3 

請檢查了這一點。 「點擊應該有索引1」 http://jsfiddle.net/blunderboy/U73VV/

而且，當我點擊「這是2號線」兩張支票，他們的父母要來不同。在check1中，父代是跨度，在check2中父代是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。這並不需要你搞亂佈局。

.bold { text-weight: bold; } 

撥動bold類：

<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> 

Answer 2

它與ivalid標記有關。您使用嵌套<p> -tags是不允許的。將案例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> 

我不知道它爲什麼會改變索引，但我知道標記是無效的。