使用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名称找到一个类

回答

相关问题