使用 jQuery 通过 ID 名称查找类
Posted
技术标签:
【中文标题】使用 jQuery 通过 ID 名称查找类【英文标题】：Using jQuery to find a class by ID name 【发布时间】：2012-11-25 20:32:27 【问题描述】：<div id="calcwrapper">
<img class="sugarcube" src="images/sugarcube.png" >
<div id="drinks">
<a id="drink1" href=""><img src="images/drinkicon1.png" ></a><div class="drink1"></div>
</div>
</div>
在上面的示例中，只有一个饮料按钮，但我的代码包含八个按钮。每个都有一个对应的同名分类 div。我正在尝试做的是“动态”获取锚标签的 id (id="drink1") 以将克隆的 sugarcube 图像 (img class="sugarcube" ...) 附加到等效的类名 div (class=“饮料1”）。我希望这听起来不会令人困惑。也许下面的不成功尝试会让你对我想要达到的目标有所了解。
尝试 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));
我搜索了 Google 和 ***，但没有找到任何代码示例。感谢您的帮助。
这是完整的 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" >
<div id="drinks">
<a id="drink1" href=""><img src="images/drinkicon1.png" ></a><div class="drink1"></div>
<a id="drink2" href=""><img src="images/drinkicon2.png" ></a><div class="drink2"></div>
<a id="drink3" href=""><img src="images/drinkicon3.png" ></a><div class="drink3"></div>
<a id="drink4" href=""><img src="images/drinkicon4.png" ></a><div class="drink4"></div>
<a id="drink5" href=""><img src="images/drinkicon5.png" ></a><div class="drink5"></div>
<a id="drink6" href=""><img src="images/drinkicon6.png" ></a><div class="drink6"></div>
<a id="drink7" href=""><img src="images/drinkicon7.png" ></a><div class="drink7"></div>
<a id="drink8" href=""><img src="images/drinkicon8.png" ></a><div class="drink8"></div>
</div>
</div>
</body>
</html>
请注意，锚标记使用 id (id="drink1")，而 div 使用类 (class="drink1")
【问题讨论】：
这在什么上下文中被称为？上面代码中的this是什么？
【参考方案1】：
如果您使用带有标识符的元素，请使用“class”而不是“id”。 “id”应该是唯一的。在给定的示例中，它用于 di 和 a 标签。
不是个好主意！
这对我有用。但是我可能没有正确理解您的问题
$('#drink1').clone().attr('id','drink2').appendTo('#drinks')
【讨论】：
我在那个 html 中没有看到重复的id。【参考方案2】：
如果我按字面意思回答你的问题，那么我可能会得到这样的结果：
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 可能很贵。 尽可能按 id 搜索 DOM，因为这样 is 本机比旧浏览器中的类更快 如果您是 对同一个元素进行多次引用，将其存储在 变量，就像我对糖块元素一样。这样你剪 减少您需要的页面搜索量以实现 结果希望这会有所帮助！
【讨论】：
迟来的回应。我们决定让这一切变得简单，并创建各种方糖组。然后在按下按钮后使用 jquery 简单地动画它们。 没问题。如果这有帮助，请标记为答案以避免此问题被视为垃圾邮件。谢谢！【参考方案3】：这样的事情怎么样：
var id = $(this).attr('id');
var targetDiv = $('.' + id);
Int他的实例目标div将是类名与该ID匹配的div
【讨论】：
以上是关于使用 jQuery 通过 ID 名称查找类的主要内容，如果未能解决你的问题，请参考以下文章