jQuery select Nachkommen, einschließlich der übergeordneten

Question

Betrachten Sie den folgenden HTML-Code:

<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>

Gegeben ein DOM-Element obj und einem Ausdruck, wie wähle ich dann die Kinder aus und möglicherweise obj ? Ich bin auf der Suche nach etwas ähnlichem wie "Nachkommen auswählen", aber auch einschließlich der Eltern, wenn sie mit dem Ausdruck übereinstimmen.

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

Gibt es eine elegantere Lösung für dieses Problem?

Answer 1

Wenn ich mich nicht irre, könnten Sie nicht einfach Folgendes tun?

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

Finden Sie das gewünschte Objekt/Element und wenden Sie CSS an. Finden Sie dann alle Objekte/Elemente innerhalb des Objekts/Elements mit dem Selektor und wenden Sie das CSS auch auf diese an?

Answer 2

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

Der Grundgedanke ist, dass Sie verschiedene Regeln durch Kommas voneinander trennen können, um eine Übereinstimmung zu erzielen. Genau wie in css. Soweit ich weiß, alles aquí wird von jquery unterstützt und kann durch Komma-Trennung "verodert" werden.

Answer 3

Tut dies nicht das, was Sie wollen (es sei denn, ich verstehe Sie falsch...)

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