child - jQuery selecciona descendientes, incluido el padre

jquery[] selector

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 obj elemento DOM y una expresión, ¿cómo hago para seleccionar cualquier niño y posiblemente obj ? Estoy buscando algo similar a "seleccionar descendientes", pero también incluye el 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");

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

Answer 1

¿No hace esto lo que quieres (a menos que no entienda bien ...)

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

Answer 2

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

La idea principal es que puede separar diferentes reglas para que coincidan con comas. Al igual que en css. Hasta donde yo sé, todo lo que aquí está respaldado por jquery puede ser "ordenado" por separación de coma.

Answer 3

Salvo una solución más agradable, he creado una nueva función y la uso en lugar de $:

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

Answer 4

jQuery 1.8 introdujo .addBack () , que toma 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 tuvieras eso, creo que

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

sería bastante eficiente, si no muy bonito.

Answer 5

Si no me equivoco, ¿no podrías hacer lo siguiente?

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

Encontrar el objeto / elemento deseado aplicar CSS, luego encontrar todos los objetos / elementos dentro de dicho objeto / elemento con dicho selector y luego aplicar el CSS a ¿es también?

Answer 6

Si te entiendo correctamente:

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

Cambié el nombre de "div" por "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, 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 aún se requiere para jQuery anterior a 1.8

Answer 7

Una forma más corta de seleccionar todos los elementos descendientes, incluido el elemento principal:

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

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 8

La respuesta de Andrew fue tan útil y la más eficiente de todas las respuestas (desde jQuery 1.8 en adelante), así que hice lo que Sam sugirió y lo convirtió en un método de extensión jQuery trivial para que todos lo usen:

Código de extensión:

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

usar de esta manera:

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

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

Crédito total a Andrew por sugerir que addBack() sea ​​la mejor opción (como en esta fecha). Le han votado en consecuencia y sugieren que todos hagan lo mismo.