jQuery - 使用 .each() 函数将类添加到基于字符串的项目

Question

我有一个从 CRM 生成的在线菜单。每个项目都可以由客户在 CRM 中使用 3 个值之一进行分类。所以我已经研究出如何获取值并将它们写入正确的位置。让我感到困惑的是遍历每个项目所需的特异性水平，找到类名，然后将它们应用于每个项目而不影响其他菜单项。

我可以使用 CRM 标签将项目 ID 写入每个类，这样我就可以解析每个类并使用父类仅影响该项目的跨度... i。

<div class="menu-item-123"> <!-- Each Class modified by CRM id -->
       <!-- Item in the span below are dynamically generated -->
   <span class="items" style="display:none;">Signature,NewItem</span>

       <!-- jQuery writes list above into classes below -->
   <p class="item-type">
     <span class="icon gf"></span>
     <span class="icon new"></span>
     <span class="icon sig"></span>
   </p>

</div>

现在我只需要有关如何让 jQuery 执行它的“.each()”函数的帮助，这正是我设想的原因。我觉得需要一个函数来解析生成的列表中的类名列表，然后是另一个函数来获取父类并将其仅写入那些跨度项。我的 jQuery 技能充其量只是中等水平，所以我为我缺乏这方面的知识表示歉意......

$("div[class*='menu-item-'] .items").each(function() {
    var result = $(this).html();
    //replace commas to create class names
    var list = result.replace(/,/gi, " ");
    //add class names to span.icon
    $("span.icon").addClass(list);
});  

你可以在下面的小提琴中看到“.each()”对所有项目的影响都是一样的，即使每个项目的类列表是不同的。这就是我的 jQuery 技能限制让我着迷的地方。提前感谢您的帮助！

这里的小提琴链接 - http://jsfiddle.net/archetypestudio/77rvc/1/

Answer 1

因为你的选择器

$("div[class*='menu-item-'] .items").each(function() {
    var result = $(this).html();
    //replace commas to create class names
    var list = result.replace(/,/gi, " ");
    //add class names to span.icon
    $(this).next().children("span.icon").addClass(list);
});

演示：Fiddle

您的选择器 $("span.icon") 以 dom 中的所有 span.icon 为目标，而您需要的是当前 .items 元素的下一个 p 中的 span.icon。