descendants sélectionnez jQuery, y compris le parent

Question

Considérez le code HTML suivant:

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

Étant donné un élément DOM et une expression obj, comment puis-je faire pour sélectionner des enfants et peut-être <=>? Je cherche quelque chose de similaire à « sélectionner les descendants », mais aussi, y compris les parents, si elle correspond à l'expression.

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

Y at-il une solution plus élégante à cela?

Answer 1

Si je vous comprends bien:

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

Je renommé le « div » à « currentDiv » pour plus de clarté. Ceci permet de sélectionner l'élément en cours et tous les éléments qu'il contient, puis des filtres à ceux qui ne disposent pas de classe et foo applique le style au reste, à savoir ceux qui ont des classes <=>.

EDIT Une légère optimisation

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

EDIT

Cette réponse a été mis à jour pour intégrer les méthodes jQuery plus récentes. Il était à l'origine

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

qui est toujours nécessaire pour jQuery plus de 1,8

Answer 2

jQuery 1.8 introduit .addBack () , qui prend un sélecteur, en faveur de .andSelf (). Ainsi, le code de tvanfosson devient beaucoup plus efficace que

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

Si vous n'avez pas, je pense que

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

serait assez efficace, sinon très joli.

Answer 3

la réponse Andrew était si utile et tout le plus efficace des réponses (de jQuery 1.8 en avant), alors je l'ai comme Sam a suggéré et transformé en une méthode triviale d'extension jQuery pour tout le monde à utiliser:

Code d'extension:

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

utiliser comme ceci:

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

jsFiddle: http://jsfiddle.net/BfEwK/

Crédit complet à Andrew pour suggérer que la meilleure addBack() l'option (à cette date). lui ont upvoted en conséquence et suggère tout le monde faire la même chose.

Answer 4

Sauf une solution plus agréable, j'ai créé une nouvelle fonction et l'utiliser au lieu de $:

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

Answer 5

Si je ne me trompe pas, vous pouvez le faire ce qui suit?

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

Trouver un objet / élément destiné appliquer CSS, puis trouver tous les objets / éléments à l'intérieur dudit objet / élément avec ledit sélecteur, puis appliquer le CSS est aussi bien?

Answer 6

A plus court chemin pour sélectionner tous éléments descendants, y compris l'élément parent:

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

Quelle est la même que:

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

Bien sûr, vous pouvez changer le sélecteur universel à l'élément désiré.

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

ou

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

Answer 7

ne le fait pas ce que vous voulez (à moins que je comprends mal ...)

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

Answer 8

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

L'idée principale est que vous pouvez séparer des règles différentes pour correspondre par des virgules. Tout comme dans css. Pour autant que je sais tout est supoprted par jquery et peut être « ORed "par des virgules séparation.