使用jQuery通過ID名稱找到一個類

<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>

在上面的示例中，只有單個飲料按鈕，但是我的代碼包含八個按鈕。每個都有相應的同名分類div。我試圖做的是「動態」獲取錨標籤的id（id =「drink1」），以將一個克隆糖圖像（img class =「sugarcube」...）添加到等效的類名div（類= 「drink1」）。我希望這聽起來不會令人困惑。也許下面的不成功嘗試會給你一些我想要達到的想法。使用jQuery通過ID名稱找到一個類

嘗試1

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

嘗試2（試圖找到通過控制檯工作解決方案）

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

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

我搜索谷歌和StackOverflow上，並沒有發現任何代碼示例。感謝您的幫助。

下面是完整的HTML代碼背景...

<!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>

請注意錨標記使用的ID（ID = 「drink1」），而在div使用一類（級= 「drink1」）

來源

2012-12-07 Ryan Allen

在什麼情況是這樣叫的div？上述代碼中的「this」是什麼？ –

如果我回答你的問題從字面上那麼我可能最終是這樣的：

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

但是，你應該儘量避免引用的東西如果您正在嘗試查找某個特定元素，則可以按類進行。我的建議是實際上只是假設一個div如drinks1永遠是旁邊的一個標籤，那麼你可以這樣做：

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

幾件事情要記住：

儘量讓您的選擇器儘可能縮小，因爲搜索DOM 會很昂貴。
嘗試通過ID在可能的情況，因爲這是搜索DOM是在舊的瀏覽器比類本身更快
如果你是使得同一個元素多次引用，將其存儲在可變像我有糖塊元素。這樣，你才能砍下來你所需要的頁面的搜索量達到結果

希望這有助於！

來源

2012-12-07 16:23:19

遲到的迴應。我們決定讓這個過程變得簡單，並創建各種各樣的sugarcubes組。然後使用jquery在按下按鈕之後簡單地設置它們的動畫。 –

沒問題。如果這有所幫助，儘管請標記爲答案，以避免這個問題作爲垃圾郵件。謝謝！ –

如果您使用帶有標識符的元素，請使用「class」而不是「id」。「id」應該是唯一的。在給出的例子中，它用於di和標籤。

不是一個好主意！ < - 對不起，我以爲有兩個同名的ID

這是爲我工作。但它可能是我不明白你的問題正確

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

來源

2012-12-07 16:21:15 devanand

我在該html中看不到重複的「id」。 –

怎麼是這樣的：

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

詮釋他的實例對象的div將與類名匹配的ID

來源

2012-12-07 16:24:01 cowls

使用jQuery通過ID名稱找到一個類

回答

相關問題