Recherche de la méthode jQuery find (..) qui inclut le nœud actuel

La méthode de traversée jQuery find (..) n'inclut pas le nœud actuel - elle commence par les enfants du nœud actuel. Quelle est la meilleure façon d'appeler une opération de recherche qui inclut le nœud actuel dans son algorithme de correspondance? En parcourant les documents, rien ne me saute immédiatement aux yeux.

Pour jQuery 1.8 et plus, vous pouvez utiliser .addBack(). Il faut un sélecteur pour que vous n'ayez pas besoin de filtrer le résultat:

object.find('selector').addBack('selector')

Avant jQuery 1.8, vous étiez bloqué .andSelf()(maintenant obsolète et supprimé) qui nécessitait alors un filtrage:

object.find('selector').andSelf().filter('selector')

Vous ne pouvez pas faire cela directement, le plus proche auquel je puisse penser est d'utiliser .andSelf()et d'appeler .filter(), comme ceci:

$(selector).find(oSelector).andSelf().filter(oSelector)
//or...
$(selector).find('*').andSelf().filter(oSelector);

Malheureusement, .andSelf()ne prend pas de sélecteur, ce qui serait pratique.

Définir

$.fn.findSelf = function(selector) {
    var result = this.find(selector);
    this.each(function() {
        if ($(this).is(selector)) {
            result.add($(this));
        }
    });
    return result;
};

puis utilisez

$.findSelf(selector);

au lieu de

$find(selector);

Malheureusement, jQuery n'a pas cette fonction intégrée. Vraiment étrange pour tant d'années de développement. Mes gestionnaires AJAX n'étaient pas appliqués à certains éléments principaux en raison du fonctionnement de .find ().

$('selector').find('otherSelector').add($('selector').filter('otherSelector'))

Vous pouvez stocker $('selector')dans une variable pour l'accélération. Vous pouvez même écrire une fonction personnalisée pour cela si vous en avez beaucoup besoin:

$.fn.andFind = function(expr) {
  return this.find(expr).add(this.filter(expr));
};

$('selector').andFind('otherSelector')

La réponse acceptée est très inefficace et filtre l'ensemble des éléments qui correspondent déjà.

//find descendants that match the selector
var $selection = $context.find(selector);
//filter the parent/context based on the selector and add it
$selection = $selection.add($context.filter(selector);

Si vous souhaitez que le chaînage fonctionne correctement, utilisez l'extrait ci-dessous.

$.fn.findBack = function(expr) {
    var r = this.find(expr);
    if (this.is(expr)) r = r.add(this);
    return this.pushStack(r);
};

Après l'appel de la fonction end, elle renvoie l'élément #foo.

$('#foo')
    .findBack('.red')
        .css('color', 'red')
    .end()
    .removeAttr('id');

Sans définir de plugins supplémentaires, vous êtes coincé avec cela.

$('#foo')
    .find('.red')
        .addBack('.red')
            .css('color', 'red')
        .end()
    .end()
    .removeAttr('id');

Dans le cas où vous recherchez exactement un élément , soit l'élément actuel, soit un à l'intérieur, vous pouvez utiliser:

result = elem.is(selector) ? elem : elem.find(selector);

Si vous recherchez plusieurs éléments, vous pouvez utiliser:

result = elem.filter(selector).add(elem.find(selector));

L'utilisation de andSelf/ andBackest assez rare, je ne sais pas pourquoi. Peut-être à cause des problèmes de performances que certains gars ont mentionnés avant moi.

(J'ai maintenant remarqué que Tgr a déjà donné cette deuxième solution)

Je sais que c'est une vieille question, mais il existe une manière plus correcte. Si l'ordre est important, par exemple lorsque vous correspondez à un sélecteur comme :first, j'ai écrit une petite fonction qui retournera exactement le même résultat que si elle find()incluait réellement l'ensemble actuel d'éléments:

$.fn.findAll = function(selector) {
  var $result = $();

  for(var i = 0; i < this.length; i++) {
    $result = $result.add(this.eq(i).filter(selector));
    $result = $result.add(this.eq(i).find(selector));
  }

  return $result.filter(selector);
};

Cela ne sera en aucun cas efficace, mais c'est le meilleur que j'ai trouvé pour maintenir un bon ordre.

Je pense que andSelfc'est ce que tu veux:

obj.find(selector).andSelf()

Notez que cela rajoutera toujours le nœud actuel, qu'il corresponde ou non au sélecteur.

Si vous regardez strictement dans le ou les nœuds actuels, vous faites simplement

$(html).filter('selector')

J'essayais de trouver une solution qui ne se répète pas (c'est -à -dire ne pas entrer deux fois dans le même sélecteur).

Et cette petite extension jQuery le fait:

jQuery.fn.findWithSelf = function(...args) {
  return this.pushStack(this.find(...args).add(this.filter(...args)));
};

Il combine find()(uniquement les descendants) avec filter()(uniquement l'ensemble actuel) et prend en charge tous les arguments consommés. Le pushStack()permet .end()de fonctionner comme prévu.

Utilisez comme ceci:

$(element).findWithSelf('.target')

Voici la vérité juste (mais triste):

$(selector).parent().find(oSelector).filter($(selector).find('*'))

http://jsfiddle.net/SergeJcqmn/MeQb8/2/