6

この HTML を考えると:

<ul>
  <li><a href="/artists/gil_elvgren/activity_stream">Activity Stream</a></li>
  <li><a href="/artists/gil_elvgren/likes">Likes</a></li>
  <li>Favorites</li>
  <li><a href="/artists/gil_elvgren/follows">Follows</a></li>
  <li><a href="/artists/gil_elvgren/sketchbook_comments">Whiteboard</a></li>

</ul>

class="current"内部にリンクを持たない単一の項目に を挿入したいと考えています。

jQuery を使用して、子を含まない要素を見つけるにはどうすればよいですか?

4

4 に答える 4

8

andセレクターを使用して、子を<li>持たない要素を選択します。<a>:has:not

$("li:not(:has(a))").addClass("current");

jsフィドル

- 編集 -

これは最短の解決策かもしれませんが、読みやすさは別として、速度に関しては間違いなく最善の解決策ではありません。

それを念頭に置いて、@bazmegakapaが提供する素晴らしい回答を確認することをお勧めします。

これはあなた (または私を含む他の誰か) が複数回使用する可能性があるため、コードをDRYするために使用できるこのプラグイン/メソッドで jQuery を少し拡張しました。

jQuery.fn.thatHasNo = function(element, method) {
  if (typeof method === "undefined" || method === null) method = "children";
  return this.not(function() {
    return $(this)[method](element).length;
  });
};

あなたが呼び出すことができるもの：

$("li").thatHasNo("a").addClass("current");

この拡張機能は、デフォルトで (メソッドの 2 番目の引数が渡されない場合)、提供されたセレクターに一致する直接の子孫 ( children ) があるかどうかを確認します。ただし、任意のツリー トラバーサル パラメーターをメソッドの 2 番目の引数として指定できます。したがって、これは次のいずれかのように記述できます。

$("li").thatHasNo("a", "children").addClass("current");
//...
$("li").thatHasNo("a", "find").addClass("current");
//...
$("li").thatHasNo(".class", "siblings").addClass("lame");

それを反映するようにjsFiddleを更新しました。

于 2011-12-29T21:59:13.980 に答える
1

.not()メソッド (基本的には negated .filter()) をフィルター関数と共に使用する必要があります。

$('li') /* select the elements you want to test */
    .not(function () { /* run a filter function on them */
        /* those that have a direct children link (use find() if you need
        any kind of children) will return true thus excluded */
        return $(this).children('a').length; 
    })
    .addClass('current'); /* add our beloved class */

jsFiddle デモ

@Krule が提案したように、複雑なセレクターを使用することもできますが、読みにくく、 :not() に関する jQuery マニュアルでさえ警告しています。

.not() メソッドは、複雑なセレクターや変数を :not() セレクター フィルターにプッシュするよりも読みやすい選択を提供することになります。ほとんどの場合、それはより良い選択です。

また、:has()あまりお勧めしません:

:has() は jQuery 拡張機能であり、CSS 仕様の一部ではないため、:has() を使用するクエリは、ネイティブ DOM の querySelectorAll() メソッドによって提供されるパフォーマンス向上を利用できません。最新のブラウザーでパフォーマンスを向上させるには、代わりに $("your-pure-css-selector").has(selector/DOMElement) を使用してください。

于 2011-12-29T22:09:27.087 に答える
0 
$("li").each(function(){
    if($(this).children().length == 0){
        //found current..
        $(this).addClass("current");
    }
});
于 2011-12-29T21:57:05.950 に答える
-1

リンクを含む要素を区別するために<span>、あなたの中に要素を追加することをお勧めします。<li>

<ul>
    <li><a href="/artists/gil_elvgren/activity_stream">Activity Stream</a></li>
    <li><a href="/artists/gil_elvgren/likes">Likes</a></li>
    <li><span>Favorites</span></li>
    <li><a href="/artists/gil_elvgren/follows">Follows</a></li>
    <li><a href="/artists/gil_elvgren/sketchbook_comments">Whiteboard</a></li>
</ul>

CSS:

ul li a { /* Link CSS */ }
ul li span { /* Current CSS */ }
于 2011-12-29T21:57:59.673 に答える