Mevcut düğümü içeren jQuery find (..) yöntemi aranıyor

JQuery find (..) geçiş yöntemi geçerli düğümü içermez - geçerli düğümün çocuklarıyla başlar. Eşleştirme algoritmasında mevcut düğümü içeren bir bulma işlemini çağırmanın en iyi yolu nedir? Dokümanlara baktığımda hiçbir şey hemen aklıma gelmiyor.

JQuery 1.8 ve üstü için kullanabilirsiniz .addBack(). Bir seçici alır, böylece sonucu filtrelemenize gerek kalmaz:

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

JQuery 1.8'den önce .andSelf(), daha sonra filtreleme gerektiren (artık kullanımdan kaldırıldı ve kaldırıldı) takılı kaldınız:

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

Bunu doğrudan yapamazsınız, aklıma en yakın olan kullanmak .andSelf()ve aramaktır .filter(), şöyle:

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

Maalesef .andSelf()kullanışlı olacak bir seçici almıyor.

Tanımlamak

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

sonra kullan

$.findSelf(selector);

onun yerine

$find(selector);

Ne yazık ki jQuery'nin bu yerleşik özelliği yok. Yıllarca süren geliştirme için gerçekten garip. AJAX işleyicilerim, .find () işlevinin nasıl çalıştığı nedeniyle bazı üst öğelere uygulanmadı.

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

$('selector')Hızlandırmak için bir değişkende saklayabilirsiniz . Çok ihtiyacınız varsa bunun için özel bir işlev bile yazabilirsiniz:

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

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

Kabul edilen cevap çok verimsizdir ve zaten eşleşen öğeler kümesini filtreler.

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

Zincirlemenin düzgün çalışmasını istiyorsanız aşağıdaki parçacığı kullanın.

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

End işlevi çağrıldıktan sonra #foo öğesini döndürür.

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

Fazladan eklenti tanımlamadan, buna bağlı kalırsınız.

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

Mevcut veya içindeki bir öğe olmak üzere tam olarak bir öğe arıyorsanız , şunları kullanabilirsiniz:

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

Birden fazla öğe arıyorsanız, şunları kullanabilirsiniz:

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

andSelf/ Kullanımı andBackoldukça nadirdir, neden olduğundan emin değilim. Belki de bazılarının benden önce bahsettiği performans sorunları yüzünden.

( Tgr'nin o ikinci çözümü zaten verdiğini şimdi fark ettim )

Bunun eski bir soru olduğunu biliyorum ama daha doğru bir yol var. Sıra önemliyse, örneğin bir seçici ile eşleştiriyorsanız , mevcut öğe kümesini gerçekten içeriyormuş :firstgibi tam olarak aynı sonucu döndürecek küçük bir işlev yazdım find():

$.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);
};

Hiçbir şekilde verimli olmayacak, ancak doğru düzeni sağlamak için bulduğum en iyisi bu.

Sanırım andSelfistediğin şey bu:

obj.find(selector).andSelf()

Seçiciyle eşleşsin veya eşleşmesin, bunun her zaman geçerli düğümü geri ekleyeceğini unutmayın.

Mevcut düğümlere kesinlikle bakıyorsanız, yapmanız gereken sadece

$(html).filter('selector')

Kendini tekrar etmeyen bir çözüm bulmaya çalışıyordum (yani aynı seçiciye iki kez girmiyorum).

Ve bu küçük jQuery uzantısı bunu yapıyor:

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

find()(Yalnızca torunları) filter()(yalnızca mevcut küme) ile birleştirir ve her ikisinin de yediği argümanları destekler. pushStack()Sağlar .end()beklendiği gibi çalışmaya.

Bunun gibi kullanın:

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

İşte doğru (ama üzücü) gerçek:

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

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