Bir öğenin jQuery kullanarak id = 'x' ile alt öğe içerip içermediğini nasıl bulabilirim?

Diyelim ki aşağıdaki HTML'yi aldım:

<div class"my-class">
    <div id="something">
        blah
    </div>
</div>
<div class"my-class">
    <div id="something-else">
        bluh
    </div>
</div>

.my-class sınıfının tüm öğelerinin üzerine geçtiğimde, # ile bir alt öğe (veya yukarıdaki örneğindeki gibi alt alt öğe) içeren bir öğeyi bulmak istiyorum x . Bu yüzden yukarıdaki örnekte ikinci öğeyi .my-class sınıfında bulmak istiyorum.

Yani böyle bir şey:

$(".my-class").each(function() {
    if ($(this).containsSubElementWithId("#x")){ //<= HOW CAN I DO THIS?
       //Do something with $(this)
    }
});

Bir öğenin belirli bir kimliği olan başka bir öğe içerip içermediğini nasıl test edebileceğimi bilen var mı? Tüm ipuçlarına açığız!

0
Gösterilen çok sayıda karmaşık çözüm var, ancak aşağıda sizin için tek bir işlemle tüm eşleşmeleri sağlayan çok basit bir çözüm ekledim (her birine gerekmiyor ).
katma yazar Gone Coding, kaynak
(eğer $ (bu) .find ('# x'). uzunluk) yapmalı
katma yazar phylax, kaynak

9 cevap

Daha da basit bir yol var:

var matches = $(".my-class:has(#x)");
// Do something with the matching elements

JSFiddle: http://jsfiddle.net/TrueBlueAussie/kj1wzytw/

Yalnızca tek bir eşleşmeye sahip olabilecek bir ID tabanlı öğe ararken, "en hızlı" arama bir ID araması olur ve bunu en yakın izler:

Örneğin.

var matches = $('#x').closest('.my-class');

ancak birden fazla eşleşmeniz varsa, (sınıf veya kimliği öneki vb.) ilk yoldan gidin.

Örneğin. (ids starting starting with x):

var matches = $(".my-class:has([id^=x])");

JSFiddle: http://jsfiddle.net/TrueBlueAussie/kj1wzytw/2/

genellikle bir sınıf araması, modern tarayıcılarda neredeyse bir ID araması kadar hızlıdır, bu nedenle birden fazla eşleşme için bir sınıf kullanmanız daha iyi olur.

Örneğin.

var matches = $(".my-class:has(.x)");

JSFiddle: http://jsfiddle.net/TrueBlueAussie/kj1wzytw/3/

3
katma
sen harikasın Her noktayı açıkladığın gibi. sanırım senden öğrenmem gerek +1 :) mükemmel cevap
katma yazar Nishit Maheta, kaynak

has() yöntemini kullanabilirsiniz:

$(".my-class").each(function() {
    if ($(this).has("#x").length){
       //Do something with $(this)
    }
});

$(this).find('#x').length will also work.

2
katma
Elbette var match = $ (". My-class: has (#x)"); , sonra match 'a bir şeyler yapın, her birinin olmasını sağlamaktan iyidir. , jQuery'de mi? Aşağıya alternatif eklendi.
katma yazar Gone Coding, kaynak
Haklısın benim hatam.
katma yazar Rory McCrossan, kaynak
$ (this) .has ('# x') , 'x' ve ise ([]) [] olur./code> doğru
katma yazar phylax, kaynak

each() işlevini kullanmayı deneyin ve belirli öğenin uzunluğunu kontrol edin:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var func = function() {
  $('.my-class').each(function() {
    var that = $(this);
    if (that.find('#x').length > 0) {
      console.log('found!');
     //that.something()...
    }
  });
}
  
func();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-class">
    <div id="something">
        blah
    </div>
</div>
<div class="my-class">
    <div id="something-else">
        bluh
    </div>
</div>
</div> </div>
2
katma
var that = $ (this); ek adımı atmanızın nedeninin ne olduğunu sorabilir miyim?
katma yazar kramer65, kaynak
@kapantzak: Senin için bir şey önerebilir miyim? jQuery nesneleri için her zaman $ öneklerini kullanırsanız, $ this , $ (this) değerini tutmak için okunabilir bir değişken yapar. (Bu ayrıca, birinin diğerine metin düzenlemesini de yapar) :)
katma yazar Gone Coding, kaynak
Sadece $ (this) nesnesinin manipülasyonu için. örneğin: if (that.length> 0) {that.css ({'color': 'red'})}
katma yazar kapantzak, kaynak
Teşekkürler, bu çok iyi bir öneri!
katma yazar kapantzak, kaynak

Deneyin -

$(this).find("[id='x']");

Kontrol etmek için -

$(this).find("[id='x']").length;
1
katma
Bahşiş için teşekkürler. Bir dahaki sefere bakacağız. :)
katma yazar Sougata Bose, kaynak
@TrueBlueAussie noktaya geldi. Teşekkürler.
katma yazar Sougata Bose, kaynak
cevap güncellendi. :)
katma yazar Sougata Bose, kaynak
Birkaç şey - özellik seçici id seçiciden çok daha yavaştır ve bu her zaman bir nesneyi döndürür ve bu nedenle daima gerçeğe eşittir. length özelliğini döndürmeniz gerekir.
katma yazar Rory McCrossan, kaynak

Yineleme yerine, öğeyi en yakın kullanarak doğrudan seçebilirsiniz:

var elem = $('.my-class #x').closest('.my-class');

Şimdi bir kimlik benzersiz olduğundan, bunu da yapabilirsiniz:

var elem = $('#x').closest('.my-class');
0
katma

Yalnızca öğeye sahip div'i hedeflemek istiyorsanız, önce öğeyi bulmanızı ve ardından gerekli sınıfa sahip en yakın ana div öğesine geçmenizi öneririm:

var objhasx = $('#x').closest('.my-class');
0
katma

İlk tekniğinizi takip ederek:

$(".my-class").each(function() {
    var $this = $(this);
   //method 1
    if ($this.find("#x").length > 0) {
       //use $this
    }
   //method 2
    if ($this.find("[id='x']").length > 0) {
       //use $this
    }
});

Daha @

0
katma
size() , jQuery 1.8'de kullanımdan kaldırıldı. Bunun yerine length kullanın
katma yazar Gone Coding, kaynak
Teşekkürler! Bilmiyordum. Ayrıca cevabımı buna göre güncelleyeceğim
katma yazar Demetris Leptos, kaynak
$(".my-class").each(function() {

  if ($(this).find("a[id=x]")){
    //do whatever you want.
  }
});
0
katma
Bu sadece bu kimliği olan diğer elemanları değil, bağlantıları kontrol eder.
katma yazar kramer65, kaynak
Bu durumda .find ('# x'); veya .find ("[id = 'x']");
katma yazar Garima Chowrasia, kaynak

Bunu dene:

var myClassElement = $(".my-class #x").parents('.my-class');
// Do something with myClassElement

Eğer #x elemanı içermiyorsa .my-class element olayıyla birşey yapmak istiyorsanız şunu kullanın:

$(".my-class").each(function() {
    var containsXElement = $(this).find("#x").length > 0;
    if (containsXElement){
       //Do something with $(this)
    }
});
0
katma
Bunun için teşekkürler, gerçekten istediğimi yapar. Mesele şu ki, #x elementini içermiyorsa, bazen bir elemana bir şey yapmak istiyorum. Üzgünüm, bundan bahsetmeliydim.
katma yazar kramer65, kaynak
soru çocuk elementinde mevcut olan kimliği kontrol etmektir. bu nasıl çalışıyor
katma yazar Nishit Maheta, kaynak
Bunun .each döngüsünde nasıl yardımcı olacağı. her öğeyi döngü içinde .my-class sınıfıyla aldığınızda
katma yazar Nishit Maheta, kaynak
bu örnek, her .my-class kabındaki #x öğesini arar ve eğer varsa parent .my-class elemanı döndürülür.
katma yazar Vasilev, kaynak