jQuery select Nachkommen, einschließlich der übergeordneten

Question

Betrachten Sie das folgende 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>

ein DOM-Element obj und einen Ausdruck gegeben, wie gehe ich über die Kinder der Auswahl und möglicherweise obj? Ich suche nach etwas ähnliches wie „wählen Nachkommen“, sondern auch die Eltern, einschließlich, wenn sie den Ausdruck übereinstimmt.

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?

Answer 1

Wenn ich Sie richtig verstanden:

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

I umbenannt die "div" auf "currentDiv" für Klarheit. Dadurch wird das aktuelle Element und alle Elemente enthält, dann diejenigen herausfiltert, die nicht Klasse foo haben und wendet den Stil auf den Rest, das heißt, diejenigen, die Klasse foo tun haben.

Bearbeiten Eine leichte Optimierung

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

Bearbeiten

Diese Antwort wurde aktualisiert neuere jQuery Methoden zu integrieren. Es war ursprünglich

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

, die nach wie vor erforderlich ist für jQuery älter als 1.8

Answer 2

jQuery 1.8 eingeführt .addBack () , die einen Wähler, für .andSelf nimmt (). So tvanfosson Code wird viel effizienter als

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

Wenn Sie nicht, dass haben, glaube ich, dass

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

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

Answer 3

Andreas Antwort war so nützlich und die effizienteste aller Antworten (von jQuery 1.8 an), so habe ich wie Sam vorgeschlagen und verwandelte sie in eine triviale Methode jQuery-Erweiterung für alle zu nutzen:

Erweiterungscode:

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

wie folgt verwenden:

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

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

Voll Kredit zu Andrew für addBack() als die beste Option was darauf hindeutet, (zu diesem Tag). Haben upvoted ihm die gleiche entsprechend und legen nahe, jeder tun.

Answer 4

eine schönere Lösung Barring, ich habe eine neue Funktion erstellt und es verwenden, statt $:

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

Answer 5

Wenn ich mich nicht irre konnte man nicht nur Folgendes tun?

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

Finden bestimmt Objekt / Element CSS anwenden, dann finden Sie alle Objekte / Elemente innerhalb des Objekt / Element mit dem Selektor und dann die CSS gelten als gut?

Answer 6

Ein kürzerer Weg, um alle Nachkomme Elemente, einschließlich dem Elternelementes:

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

Welche ist das gleiche 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 Universal-Selektor auf das gewünschte Element ändern.

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

oder

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

Answer 7

Ist das nicht tun, was Sie wollen (es sei denn, ich falsch verstehen ...)

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

Answer 8

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

Die Grundidee ist, dass Sie unterschiedliche Regeln durch Komma übereinstimmen, auf trennen kann. Genau wie in CSS. Soweit ich alles wissen hier von jquery supoprted und kann „verodert sein "durch Komma-Trenn.