jQuery selecciona descendientes, incluido el padre

Question

Considere el siguiente 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>

Dado un elemento DOM obj y una expresión, ¿cómo hago para seleccionar niños y posiblemente obj?Estoy buscando algo similar a "seleccionar descendientes", pero que también incluya al padre, si coincide con la expresión.

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

¿Existe una solución más elegante para esto?

Answer 1

Si te entiendo correctamente:

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

Cambié el nombre del "div" a "currentDiv" para mayor claridad.Esto selecciona el elemento actual y todos los elementos que contiene, luego filtra los que no tienen clase. foo y aplica el estilo al resto, es decir, a los que sí tienen clase foo.

EDITAR Una ligera optimización

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

EDITAR

Esta respuesta se ha actualizado para incorporar métodos jQuery más nuevos.fue originalmente

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

que todavía es necesario para jQuery anterior a 1.8

Answer 2

.addBack (), que tiene un selector, a favor de .andSelf (). Así que el código de tvanfosson se vuelve mucho más eficiente

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

Si no tienes eso, creo que

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

sería bastante eficiente, si no es muy bonita.

Answer 3

respuesta

de Andrew era tan útil y la más eficiente de todas las respuestas (de jQuery 1.8 en adelante), por lo que hizo como Sam sugirió y lo convirtió en un método de extensión de jQuery trivial para que todos puedan usar:

código de extensión:

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

utilizar como esto:

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

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

Crédito completo a Andrew por sugerir addBack() como la mejor opción (como en esta fecha). Se le upvoted en consecuencia y sugieren que otros hacen lo mismo.

Answer 4

A menos que una solución mejor, he creado una nueva función y lo uso en lugar de $:

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

Answer 5

Si no me equivoco es posible que no acaba de hacer lo siguiente?

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

Buscar objeto / elemento destinado aplicar CSS, a continuación, encontrar todos los objetos / elementos dentro de dicho objeto / elemento con dicho selector y luego se aplican a la CSS es así?

Answer 6

Un camino más corto para seleccionar todos los elementos descendientes, incluyendo el elemento padre:

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

Lo que es lo mismo 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>

Por supuesto, puede cambiar el selector universal al elemento deseado.

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

o

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

Answer 7

¿Esto no hace lo que quiere (a menos que me malinterpreten ...)

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

Answer 8

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

La idea principal es que se puede separar diferentes reglas para que coincida con el por comas. Al igual que en css. Por lo que yo sé todo aquí se supoprted por jQuery y puede ser "un OR "por comas de separación.