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中，parent是span，在check2中parent是div。

请通过更改tagName让我知道我正在做出的改变。他们与父母的相对位置仍然相同。

Answer 1

您无法在标记内放置标记。您最终得到以下标记：

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

您可能希望将替换为，以保留布局。

或者，如果您想要更改标记的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标记有关。你使用嵌套的 - 标签是不允许的。将案例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>

我不知道它为什么会改变索引，但我知道标记无效。

Jquery index（）方法获取子索引

2 个答案: