-2

私はこのマークアップを持っています：

<ul>
  <li> // this
    <ul>
      <li>
        <div></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </li>
  <li> // this
    <ul>
      <li>
        <div></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </li>
</ul>

私のスタイルではこれがあります：

.main_menu ul > li {
   // some style
}

liそしてそれは私にその木の子供のためではなく、その木の最初の人のためだけにいくつかのスタイルを与えますli。だから、私の質問は、jQueryでこれを設定する方法ですが、それを試して$('.main_menu ul > li');も機能しません。私はこの書き込みのいくつかの種類が必要だと思います：

$('.main_menu ul').each().first().child();

しかし、それは正しくありません、あなたは私を助けることができますか？

4

11 に答える 11

1

サポートは完全ではありませんが、純粋な CSS3 でこれを行うことができます。

セレクターを使用すると、:first-child必要なものが選択されます。 :first-child jQuery でも動作するので、そこで使用できます。

ul li:first-child選択します：

<ul>
  <li>             //this
    <li>
      <div></div>
    </li>
  </li>
  <li>             
    <li>
      <div></div>
    </li>
  </li>
</ul>

>最初の子だけでなく、すべての直接の子孫を選択します。例えば：

ul > li選択します：

<ul>
  <li>             //this
    <li>
      <div></div>
    </li>
  </li>
  <li>             // this
    <li>
      <div></div>
    </li>
  </li>
</ul>
于 2013-02-27T10:06:12.557 に答える
1

このCSSセレクターを試しましたか:

.main_menu ul li:first-child {
   // some style
}

そのようにjQueryは必要ありません！

また、コメントで指摘されているように、マークアップが間違っています。ネストされたそれぞれは、別の IE<li>でラップする必要があります。<ul>

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>
于 2013-02-27T10:06:59.160 に答える
0

これを試してください：フィドル

$('ul').children('li').first().addClass('active');
于 2013-02-27T10:20:08.273 に答える
0

呼び出された疑似セレクター:first-childは、要素の最初の子を選択できます。これは CSS セレクターであり、jQuery もサポートしています。したがって、CSS または jQuery のいずれかで使用できます。

ul li:first-child {
   /* Your style */
}

またはjQuery

$("ul li:first-child").css('style-name', 'property value');
于 2013-02-27T10:08:27.563 に答える
0

それは働いています...

$('.main_menu ul li:first')
于 2013-02-27T10:08:41.627 に答える
0

試す：

.main_menu ul li:first-child {
   // some style
}
于 2013-02-27T10:08:47.313 に答える
0

:first-child親の最初の子であるすべての要素を選択 するセレクターを使用できます。

$('.main_menu ul li:first-child')

ドキュメンテーション

于 2013-02-27T10:06:25.697 に答える
0

試す

$('.main_menu ul li').first().addClass('fancyClassOnFirstChild');

また$('.main_menu ul li:first-child').addClass('fancyClassOnFirstChild');

于 2013-02-27T10:06:47.100 に答える
0

試す

$('.main_menu ul').first('li').css('border','1px solid red');
于 2013-02-27T10:06:47.020 に答える
0

試してみる、

$('.main_menu li:first').css('color','red');
于 2013-02-27T10:14:13.970 に答える
-1

これeq(0)を行うことができます。このコードを試してください:

$('.main_menu > ul').find('li:eq(0)').addClass('classname');
于 2013-02-27T10:11:06.630 に答える