2

query index() メソッドを使用して、親に対する要素のインデックスを取得しています。

ここに 2 つのコードがあります: 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 番目の太字の名前を p タグ名に置き換えただけです。

疑わしい領域は、これらの両方のケースで答えが異なることです。答えは次のとおりです。

Case1: index comes 1
Case2: index comes 3

これをチェックしてください。「インデックス1が必要です」をクリックしてください http://jsfiddle.net/blunderboy/U73VV/

また、両方のチェックで「This is line2」をクリックすると、親が異なってきます。check1 では親は span であり、check2 では親は 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/>ます。

または、タグの属性を変更したい場合は、boldCSS を使用できます。これにより、レイアウトをいじる必要はありません。

.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 に答える