親を含むjQueryの選択の子孫、

StackOverflow https://stackoverflow.com/questions/364791

質問

次の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");

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

役に立ちましたか？

解決

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

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

私は明確にするため、「currentDiv」に「DIV」に改名しました。これは、そのクラスのfooを持っており、残りの部分にスタイルが適用されないもの、すなわち、クラスfooを持っているものを除外し、現在の要素とそれに含まれるすべての要素を選択します。

編集わずかな最適化

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

編集

この答えは、新しいjQueryのメソッドを組み込むように更新されました。それはもともと

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

まだjQueryのために必要とされるより古い1.8

他のヒント

jQueryの1.8導入 .addBack .andSelf（の賛成で、セレクタを取る（）の、）。だから、tvanfossonのコード

としてはるかに効率的になります 
$(currentDiv).find(".foo").addBack(".foo").css("color", "red");

あなたはそれを持っていなかった場合、私は思う。

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

かなり効率的で、そうでない場合は非常にきれいになります。

アンドリューのの答えはとても便利と（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/する

の最良の選択肢として（この日のように）addBack()を示唆ためのアンドリューへのフルクレジット。それに応じて彼をupvotedし、誰もが同じことを示唆している。の

よりよい解決策がなければ、私は新しい関数を作成して、代わりの$を使用します：

var _$ = function(expr, parent){ 
   return $(parent).is(expr) ? $(expr, parent).add(parent) : $(expr, parent); 
}

私はあなただけで次の操作を行うことができませんでした間違っていないですか？

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

、その後でオブジェクト/要素は、セレクタ、その後にCSSを適用するが、同様のですか？

前記内のすべてのオブジェクト/要素を見つけ、所期の目的/要素はCSSを適用して下さい

：親要素を含むのすべてのの子孫要素を、選択するための

短い方法 

$('*', '#parent').addBack();

と同じである。

$('#parent').find('*').addBack();


$('*', '#parent').addBack().css('border', '1px solid #f00');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <span>Child</span>
  <span>Another child</span>
</div>

もちろん、あなたが目的の要素にユニバーサルセレクタを変更することができます。

$('.foo', '#parent').addBack();

または

$('#parent').find('.foo').addBack();

これはあなたがやりたいことない（私は誤解しない限り...）

$(document).ready(function(){
    $("div.foo").css("color", "red");
});

 $('div.foo, div.foo > *').css('color','red');

主なアイデアは、あなたがカンマで上の一致する異なるルールを分けることができるということです。ただ、CSSで好きです。私の知る限りでは、すべてここjqueryのでsupoprtedされ、「論理和することができの「コンマ分離してます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top