javascript - 选择类别并将其应用于具有相同类别的多个 div

Question

我有一个元素列表，其标记看起来与此类似:

<article class="day past">
  <div class="schedule schedule-261 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-283 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-290 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-261 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-290 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-300 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-261 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>

schedule-NUMBER 类是根据元素在数据库中的 ID 分配的。基本上，这是来自具有重复事件的日历的标记，因此一些事件将共享相同的数据库记录。

如果一个元素“重复”(即存在多个 schedule-261 的 div)，我想在悬停时添加/删除一个额外的类schedule-261 div。如果一项不是“重复”(即只有一个带有 schedule-283 的 div)，则不会在悬停时应用额外的类。

jQuery 是这个特定元素的首选库，因此首选 jQuery 解决方案。

谢谢!

Answer 1

$(".schedule").each(function() {
    var cls = (this.className.match(/schedule-\d+/) || []).pop();
    if (cls.length === 0) return;

    var els = $(".schedule." + cls);
    if (els.not(this).length > 0) {
        els.hover(function() {
            els.addClass("someClass");
        }, function() {
            els.removeClass("someClass");
        });
    }
});

演示: http://jsfiddle.net/DSYpA/