2

我正在使用查询 index() 方法来获取元素相对于其父元素的索引。

这里有两个代码： 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>

在 code2 中，我只是将第二个粗体名称替换为 p 标签名称。

有疑问的地方是这两种情况下的答案都不同。答案是：

Case1: index comes 1
Case2: index comes 3

请检查一下。“点击应该有索引 1” http://jsfiddle.net/blunderboy/U73VV/

此外，当我在两张支票上单击“这是第 2 行”时，他们的父母会变得不同。在 check1 中，parent 是 span，而在 check2 中，parent 是 div。

请让我知道仅通过更改 tagName 有什么不同。他们与父母的相对位置仍然相同。

4

2 回答 2

3

您不能在<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/>用 a<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>

于 2012-06-15T06:27:54.073 回答
1

它与有效标记有关。您不允许使用嵌套<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>

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

于 2012-06-15T06:27:12.890 回答