文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jQuery按ID名称查找类

问使用jQuery按ID名称查找类
EN

Stack Overflow用户

提问于 2012-12-08 00:18:46

回答 3查看 14.1K关注 0票数 7

<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="drink1")的id，以附加一个克隆糖立方体图像(img class=" sugarcube“...)转换为等效的类名div (class="drink1")。我希望这听起来不会让人困惑。也许下面这些不成功的尝试会让你对我想要实现的目标有所了解。

尝试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使用类(class="drink1")

jquery

class

find

clone

classname

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-12-08 00:23:19

如果我从字面上回答你的问题，那么我可能会得到这样的结果：

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

我的建议是，实际上只要假设像drinks1这样的div总是紧挨着a标记，那么您可以这样做：

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的代价可能会很高。这样就减少了为了获得

结果所需的页面搜索量

希望这能有所帮助！

票数 4

Stack Overflow用户

发布于 2012-12-08 00:21:15

如果您正在使用具有标识符的元素，则使用"class“而不是"id”。id必须是唯一的。在给定的例子中，它用于di和a标签。

不是个好主意！<-对不起，我以为有两个同名的ids

这对我很有效。但有可能我没有正确理解你的问题

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

票数 2

Stack Overflow用户

发布于 2012-12-08 00:24:01

这样如何：

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

Int实例的目标div将是具有与该ID匹配的类名的div

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13766890

复制

相似问题

问使用jQuery按ID名称查找类
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery按ID名称查找类EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery按ID名称查找类
EN