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 Sie richtig verstehe:

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

Der Übersichtlichkeit halber habe ich das "div" in "currentDiv" umbenannt. Dies wählt das aktuelle Element und alle Elemente, die es enthält, und filtert dann diejenigen heraus, die nicht die Klasse foo und wendet den Stil auf den Rest an, d. h. auf diejenigen, die die Klasse foo .

EDITAR Eine leichte Optimierung

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

EDITAR

Diese Antwort wurde aktualisiert, um neuere jQuery-Methoden einzubeziehen. Sie war ursprünglich

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

die für jQuery älter als 1.8 noch erforderlich ist

Answer 2

JQuery 1.8 eingeführt .addBack() die einen Selektor benötigt, zugunsten von .andSelf(). tvanfossons Code wird also viel effizienter als

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

Wenn du das nicht hättest, würde ich denken, dass

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

wäre ziemlich effizient, wenn auch nicht sehr schön.

Answer 3

Andrew's Antwort war so nützlich und die effizienteste von allen Antworten (ab jQuery 1.8), also habe ich das getan Sam vorgeschlagen und in eine triviale jQuery-Erweiterungsmethode verwandelt, die jeder nutzen kann:

Erweiterungscode:

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

so verwenden:

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

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

Volle Anerkennung an Andrew für den Vorschlag addBack() als die beste Option (zu diesem Zeitpunkt). Ich habe ihn entsprechend hochgestuft und schlage vor, dass jeder dasselbe tut.

Answer 4

In Ermangelung einer schöneren Lösung habe ich eine neue Funktion erstellt und verwende sie anstelle von $:

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

Answer 5

Ein kürzerer Weg zur Auswahl tous abhängige Elemente, einschließlich des übergeordneten Elements:

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

Das ist dasselbe wie:

$('#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>

Natürlich können Sie den Universalselektor in das gewünschte Element ändern.

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

o

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