I have a list of items with markup that looks similar to this:
<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>
The schedule-NUMBER
class is assigned based on the item's ID in a database. Basically, this is markup from a calendar that has repeating events, so some of the events will share the same database record.
If an item is "repeating" (ie. more than one div with schedule-261
exists), I'd like to add/remove an extra class on hover in/out for all of schedule-261
divs. If an item is not "repeating" (ie. there's only one div with schedule-283
), then no extra class is applied on hover.
jQuery is the library of choice for this particular project, so a jQuery solution is preferred.
Thanks!
$(".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");
});
}
});
$('article .schedule').on('mouseover', function () {
var s = $(this);
if(s.size()>1) {
s.addClass('myHoverClass');
}
});
Find the "schedule-[Number]" class and add the styling class:
$(".schedule").on("someevent", function(){
var className = this.className;
var classes = className.split(" ");
for(var i=0;i<classes.length;i++)
{
var cls = classes[i];
if (cls.indexOf("schedule") != -1 && cls.replace("schedule").length !== 0 && $("." + cls).length > 1)
{
$("." + cls).addClass("whatever");
}
}
});
$('.schedule').each(function()
{
var s=this.className.split(/\s+/).filter(function(w){return /schedule-\d+/.test(w);});
if (s && $('.' + s).length > 1) $('.' + s).addClass('yourclass');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.