javascript - 允许 javascript 在附加了任何数字的 div 上工作

Question

我有一小部分 jquery 将 jquery-ui 手风琴应用于 div 数组。

div 是动态生成的，每个 div 都需要有一个唯一的 ID。我已经成功地为 div 生成了唯一的 ID，每个 ID 的末尾都有不同的数字。现在我希望 jquery 足够灵活，可以处理任何 div，无论最后是什么数字。所有 div 都有命名约定为“activity-accordion123”或“activity-accordion+number”的 ID

这是我目前用于已经生成的 div 的代码：

$(function() {
    $( "#activity-accordion408,#activity-accordion410,#activity-accordion415,#activity-accordion428,#activity-accordion439,#activity-accordion427" ).accordion({
      collapsible: true,
heightStyle: "content",
active: false,
header: "h3",
navigation: true
    }); 
  });

我想更改此 javascript，以便它可以与 ID 为“activity-accordion+any number”的任何 div 一起使用。这可能吗？

Answer 1

使用这个 CSS 选择器：*=

$(function() {
    $( "[id*='activity-accordion']" ).accordion({
         collapsible: true,
         heightStyle: "content",
         active: false,
         header: "h3",
         navigation: true
    }); 
});

Answer 2

你可以像这样选择它们：

$("div[id^='activity-accordion'"])

选择所有以活动手风琴开头的 div

Answer 3

要匹配所有<div>s，与id模式中的一个activity-accordion<number>，您可以使用：

$('div').filter(function() {
    return /activity\-accordion\d+/.test(this.id);
}).accordion({
    ...
});

Answer 4

像这样使用 ID 属性选择器通配符“开始于”：

$('div[id^="activity-accordion"]').accordion({
    collapsible: true,
    heightStyle: "content",
    active: false,
    header: "h3",
    navigation: true
});

Answer 5

有什么理由不能让每个 div 都拥有一个“活动手风琴”类？类对于样式/操作多个相似元素很有用。然后您可以使用$('.activity-accordion')来选择所有此类元素。

Answer 6

使用一个类会更有指导性和正确性

$(function() {
    $( ".accordions" ).accordion({
      collapsible: true,
heightStyle: "content",
active: false,
header: "h3",
navigation: true
    }); 
  });