23

次の HTML を検討してください。

<div class="foo" id="obj">
   I should be changed red
   <div class="bar" style="color:black;">
      I should not be changed red.
      <div class="foo">I should be changed red.</div>
   </div>
</div>

DOM 要素objと式が与えられた場合、子を選択するにはどうすればよいobjですか? 「子孫の選択」に似たものを探していますが、式と一致する場合は親も含めます。

var obj = $("#obj")[0];

//wrong, may include siblings of 'obj'
$(".foo", $(obj).parent()).css("color", "red");

//wrong -- excludes 'obj'
$(".foo", obj).css("color", "red");

//correct way, but it's annoying
var matches = $(".foo", obj);
if ($(obj).is(".foo")) matches = matches.add(obj);
matches.css("color", "red");

これに対するよりエレガントな解決策はありますか？

4

8 に答える 8

28

私があなたを正しく理解していれば：

$(currentDiv).contents().addBack('.foo').css('color','red');

わかりやすくするために、「div」の名前を「currentDiv」に変更しました。これにより、現在の要素とそれに含まれるすべての要素が選択され、次に class を持たない要素が除外さfooれ、残りの要素、つまり class を持つ要素にスタイルが適用されますfoo。

EDIT わずかな最適化

$(currentDiv).find('.foo').addBack('.foo').css('color','red');

編集

この回答は更新され、新しい jQuery メソッドが組み込まれました。もともとは

$(currentDiv).find('.foo').andSelf().filter('.foo').css('color','red');

これは、1.8 より古い jQuery にはまだ必要です

于 2008-12-13T04:01:27.257 に答える
9

jQuery 1.8 では、 .andSelf() を支持して、セレクターを取る .addBack()が導入されました。そのため、tvanfosson のコードは、

$(currentDiv).find(".foo").addBack(".foo").css("color", "red");

あなたがそれを持っていなかったなら、私はそれだと思います

$(currentDiv).find(".foo").add(currentDiv.filter(".foo")).css("color", "red");

非常にきれいではないにしても、かなり効率的です。

于 2013-05-31T23:39:27.200 に答える
2

アンドリューの答えは非常に便利で、すべての答えの中で最も効率的でした（jQuery 1.8以降）ので、サムが提案したようにして、誰もが使用できる簡単なjQuery拡張メソッドに変えました：

延長コード:

jQuery.fn.findAndSelf = function (selector){
    return this.find(selector).addBack(selector);
};

次のように使用します。

$(function(){
    $('#obj').findAndSelf('.foo').css('color', 'red');
});

JSFiddle: http://jsfiddle.net/BfEwK/

(現時点で) 最良の選択肢として提案してくれた Andrew に感謝addBack()します。それに応じて彼に賛成票を投じ、全員に同じことを提案してください。

于 2014-06-05T10:56:18.907 に答える
1

より良い解決策がなければ、新しい関数を作成し、$ の代わりに使用しました。

var _$ = function(expr, parent){ 
   return $(parent).is(expr) ? $(expr, parent).add(parent) : $(expr, parent); 
}
于 2008-12-13T03:55:07.173 に答える
0

私が間違っていなければ、次のことをしていただけませんか？

$("#obj").css("color", "red").find(".foo").css("color", "red");

目的のオブジェクト/要素を見つけて CSS を適用し、そのオブジェクト/要素内のすべてのオブジェクト/要素をそのセレクターで見つけてから、CSS を適用しますか?

于 2011-08-23T21:18:44.220 に答える
-1 
 $('div.foo, div.foo > *').css('color','red');

主なアイデアは、一致するさまざまなルールをコンマで区切ることができるということです。cssのように。私が知る限り、ここにあるものはすべて jquery でサポートされており、コンマ区切りで「論理和」を取ることができます。

于 2008-12-13T03:54:48.720 に答える
-1

これはあなたが望むことをしませんか（誤解しない限り...）

$(document).ready(function(){
    $("div.foo").css("color", "red");
});
于 2008-12-13T04:00:22.920 に答える