JQuery index() метод для получения индекса ребенка

Question

Я использую метод query() метода, чтобы получить индекс элемента относительно его родителя.

Вот два кода: code1

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

В Кодекса2, я просто заменил 2-го смелого имени с именем р тегов.

Площадь сомнений в ответе варьируется в обоих этих случаях. Ответы:

Case1: index comes 1 
Case2: index comes 3 

Пожалуйста, проверьте это. «Нажмите« Должен иметь индекс 1 » http://jsfiddle.net/blunderboy/U73VV/

И более того, когда я нажимаю« Это строка2 »на обеих проверках, их родители идут разными. В check1 родительский элемент span и в check2 parent - div.

Пожалуйста, дайте мне знать, какую разницу я делаю, просто изменив tagName. Их относительное положение w.r.t их родителя остается тем же.

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> 

Вы можете заменить <b/> с <span/> вместо сохранить макет.

Или, если вы хотите изменить атрибут 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>-тэгов не допускается. Меняя случай 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> 

Я не знаю, почему он меняет индекс, но я знаю, что разметка недействительна.