Kimlik numarasına göre bir sınıf bulmak için jQuery'yi kullanma

<div id="calcwrapper"> 
    <img class="sugarcube" src="images/sugarcube.png" width="13" height="17"> 
    <div id="drinks"> 
     <a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div> 
    </div> 
</div>

Yukarıdaki örnekte yalnızca tek bir içecek düğmesi vardır, ancak kodum sekiz düğme içerir. Her biri karşılık gelen aynı adlandırılmış sınıflı div ile. Yapmaya çalıştığım şey "dinamik olarak" klon şeker küpü görüntüsünü (img class = "sugarcube" ...) eşdeğer sınıf adı div (sınıf) içine eklemek için bağlantı etiketinin kimliğini (id = "drink1") yakalar. = "drink1"). Umarım bu kafa karıştırıcı değildir. Belki de başarısız olan başarısız girişimler size neyi başarmaya çalıştığım hakkında bir fikir verecektir.Kimlik numarasına göre bir sınıf bulmak için jQuery'yi kullanma

Denemesi 1

$(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent((".drink1").attr("class")));

Denemesi 2 Google'ı ve StackOverflow aramalara ve herhangi bir kod örnekleri bulamadı

var className = $(this).attr("id"); 
console.log(className); 

console.log($(this).parent().children("div").hasClass(className));

(konsol aracılığıyla bir çalışma çözüm bulmak için çalışıyor). Yardımın için teşekkürler.

İşte tam HTML kodunu bağlam var ... div bir sınıf (class = "drink1") kullanırken

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
    <script src="js/jquery-animate-css-rotate-scale.js"></script> 
    <script> 
     $(function() { 
      $(".sugarcube").hide(); 
      var max = 8; 
      function animateSugarcubes() { 
       for (var i=1; i<=max; i++) { 
        $(".sugarcube" + i).css("position", "absolute"); 
        $(".sugarcube" + i).css("top", Math.ceil(Math.random() * (50 - 20) + 20)); 
        $(".sugarcube" + i).css("left", Math.ceil(Math.random() * (85 - 40) + 40)); 
        $(".sugarcube" + i).hide(); 
       } 
      } 

      $("#drinks a").click(function() { 

       for (var i=1; i<=max; i++) { 
        // Attempt 1 
        $(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent().children($(this).attr("id"))); 

        // Attempt 2 test code. 
        var className = $(this).attr("id"); 
        console.log($(this).parent().children("div").hasClass(className)); 
       } 

       return false; 
      }); 
      animateSugarcubes(); 
     }); 
    </script> 
</head> 
<body> 

<div id="calcwrapper"> 
    <img class="sugarcube" src="images/sugarcube.png" width="13" height="17"> 
    <div id="drinks"> 
     <a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div> 
     <a id="drink2" href=""><img src="images/drinkicon2.png" width="84" height="81"></a><div class="drink2"></div> 
     <a id="drink3" href=""><img src="images/drinkicon3.png" width="84" height="81"></a><div class="drink3"></div> 
     <a id="drink4" href=""><img src="images/drinkicon4.png" width="80" height="81"></a><div class="drink4"></div> 
     <a id="drink5" href=""><img src="images/drinkicon5.png" width="84" height="81"></a><div class="drink5"></div> 
     <a id="drink6" href=""><img src="images/drinkicon6.png" width="84" height="81"></a><div class="drink6"></div> 
     <a id="drink7" href=""><img src="images/drinkicon7.png" width="84" height="81"></a><div class="drink7"></div> 
     <a id="drink8" href=""><img src="images/drinkicon8.png" width="84" height="81"></a><div class="drink8"></div> 
    </div> 
</div> 

</body> 
</html>

bağlantı etiketi bir kimlik (id = "drink1") kullandığını unutmayın

kaynak

2012-12-07 Ryan Allen

eşleşen sınıf adıyla div'ler olacak onun örnek hedef div Int

var id = $(this).attr('id'); var targetDiv = $('.' + id);

? Yukarıdaki kodda bu nedir? –

anlamadı mümkündür:

var drinksLinks = $("#drinks a"); // get list of all a tags inside drinks 
drinksLinks.each(function() {  // perform function for each element 
    var element = $(this);   // get jquery object for the current element 
    var id = element.attr("id"); // get the id 
    var div = element.find("." + id); // find the element with class matching the id 

    $(".sugarcube").clone().appendTo(div); 
});

Ancak, bir şeyler başvuran önlemek için çalışmalısınız belirli bir element bulmaya çalışıyorsanız Birkaç şey hatırlamak

var sugarcube = $(".sugarcube"); 
var drinksLinks = $("#drinks a"); // get list of all a tags inside drinks 

drinksLinks.each(function() { 
    var div = $(this).next(); // get the element next to the a tag 
    sugarcube.clone().appendTo(div); 
});

Benim önerim aslında sadece böyle drinks1 gibi bir div, o zaman böyle bir şey yapabilirsiniz daima hemen yanındaki bir etikete olduğunu varsaymak olurdu Seçicilerinizi DOM 'un pahalı olabileceği kadar dar hale getirmeye çalışın.
olan olası bu olarak kimliğe göre DOM aramayı deneyin eski tarayıcılarda sınıfı tarafından daha doğal hızlıdır
Eğer Birlikte var gibi bir değişkende saklayın, aynı öğeye birden fazla başvuru yapma değilseniz sugarcube öğesi. Bu şekilde bir sonuç bu olur

Umut elde etmek için ihtiyacınız olan sayfanın aramaların miktarı aşağı kesti!

kaynak

2012-12-07 16:23:19

Gecikmeli bir yanıt. Bunu kolaylaştırmaya ve çeşitli şeker kamışı gruplarını oluşturmaya karar verdik. Daha sonra, düğmeye basıldıktan sonra onları basitçe canlandırmak için jquery'yi kullanın. –

Sorun yok. Eğer bu hiç yardımcı olmamışsa, lütfen bu sorunun spam olarak algılanmasını önlemek için cevap olarak işaretleyin. Teşekkürler! –

Tanımlayıcı içeren öğeler kullanıyorsanız, "id" yerine "sınıf" kullanın. "id" benzersiz olmalıdır. Verilen örnekte, di ve aynı zamanda bir etiket için kullanılır.

iyi bir fikir değil! < - Maalesef, bu isimde

numaralı iki kimliğin olduğunu düşünüyorum. Ama ben tam anlamıyla sonra sorunuza cevap böyle bir şey ile sonunda olabilir ben sorunuzu doğru

$('#drink1').clone().attr('id','drink2').appendTo('#drinks')

kaynak

2012-12-07 16:21:15 devanand

Bu html'de bir "id" kopyası görmüyorum. –

Nasıl böyle bir şey hakkında: hangi bağlamda bu denir yılında bu kimliği

kaynak

2012-12-07 16:24:01 cowls

Kimlik numarasına göre bir sınıf bulmak için jQuery'yi kullanma

cevap

İlgili konular