jQuery selezionare discendenti, tra cui il genitore

Question

Si consideri il seguente codice 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>

Dato un elemento DOM obj ed espressione, come vado sulla selezione di tutti i bambini e, eventualmente, <=>? Sto cercando qualcosa di simile a "selezionare discendenti", ma anche compreso il genitore, se corrisponde all'espressione.

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

C'è una soluzione più elegante a questo?

Answer 1

Se ho capito bene:

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

ho rinominato il "div" a "currentDiv" per chiarezza. Questo seleziona l'elemento corrente e tutti gli elementi in esso contenuti, quindi filtra quelli che non hanno classe foo e applica lo stile al resto, cioè quelle che associ classe <=>.

Modifica Una leggera ottimizzazione

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

Modifica

Questa risposta è stato aggiornato per includere nuovi metodi di jQuery. In origine era

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

che è ancora necessario per jQuery di età superiore a 1,8

Answer 2

.addBack () , che prende un selettore, a favore di .andSelf (). Quindi il codice di tvanfosson diventa molto più efficiente

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

Se non si dispone di questo, penso che

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

sarebbe piuttosto efficiente, se non molto carina.

Answer 3

risposta

di Andrew era così utile e la più efficiente di tutte le risposte (da jQuery 1.8 in poi), così ho fatto come Sam suggerito e lo ha trasformato in un metodo di estensione jQuery banale da usare per chiunque:

codice di estensione:

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

utilizzare in questo modo:

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

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

di credito completo a Andrew per aver suggerito addBack() come l'opzione migliore (come a tale data). lo hanno upvoted di conseguenza e suggerire a tutti di fare lo stesso.

Answer 4

A meno di una soluzione migliore, ho creato una nuova funzione e lo uso invece di $:

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

Answer 5

Se non sbaglio hai potuto non solo effettuare le seguenti operazioni?

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

Trova oggetto / elemento destinato applicare CSS, poi trovare tutti gli oggetti / elementi all'interno di detto oggetto / elemento con detto selettore e quindi applicare il CSS a è così?

Answer 6

Un modo più breve per selezionare tutti elementi discendenti, tra cui l'elemento principale:

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

che è la stessa come:

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

Naturalmente, è possibile modificare il selettore universale per l'elemento desiderato.

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

o

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

Answer 7

Questo non fare quello che vuoi (a meno che non fraintendere ...)

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

Answer 8

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

L'idea principale è che è possibile separare regole diverse per abbinare il da virgole. Proprio come in css. Per quanto ne so tutto qui è supoprted da jQuery e può essere "ORed "da virgole di separazione.