包含相同数字的类/ID 的 JQuery 选择器问题答案

【问题标题】：JQuery selector question for classes / ids containing the same number包含相同数字的类/ID 的 JQuery 选择器问题
【发布时间】：2011-03-28 15:28:17
【问题描述】：

我的网站有一组包含“element1”、“element2”、“element3”等类的元素，还有另一组包含“1”、“2”、“3”类的元素。这些在 DOM 中没有直接关系，所以我不能使用父/子选择器。

我想编写一个 JQuery 脚本，当用户将鼠标悬停在“element1”上时，会在“1”中触发效果/功能。

当然，我不想手动编写所有配对。我如何编写此代码以便选择器“检测”类名中的数字？我需要使用正则表达式吗？

如果需要，我可以更改我的 HTML。

【问题讨论】：

标签： jquery

【解决方案1】：

如果您只想使用一点代码来影响所有元素，那么应该这样做：

$('.hover').hover(function() {
    var element = $(this).attr('class').replace(' hover', '');
    element = element.replace('element', '');
    $('.'+element).slideToggle();
});

您需要将类悬停添加到您希望它处理的所有元素，然后它将获取元素编号并切换该元素。

这可能是一个示例 HTML

<a href="#" class="element1 hover">Element 1</a><br/>
<a href="#" class="element2 hover">Element 2</a><br/>
<div class="1 hidden">You are hovering over element 1</div>
<div class="2 hidden">You are hovering over element 2</div>

见here for a demo

还有评论demo here

【讨论】：

谢谢，这正是我需要的！

【解决方案2】：

如果您的所有 ID 都只是 elementX，您可以使用不带正则表达式的 String.prototype.replace 来获取该类：

// `this` refers the DOM element in question
var class = this.id.replace('element', '');

Imo 最好给你的元素类名，而不是只包含一个数字。

最好的方法是给所有具有这种 ID 的元素一个类：

$('.someclass').hover(function() {
    $('.' + this.id.replace('element', '')).something();
});

【讨论】：

【解决方案3】：

你可以试试

$("[id^='element']")..

或者使用循环来实现

for (i = 0; i < 10; i++) {
   $('element' + i)..
}

【讨论】：