javascript - Getting unique class names and looping through them -
so have html:
<div class="videos"> <div class="video year-2013">...</div> <div class="video year-2013">...</div> <div class="video year-2013">...</div> <div class="video year-2012">...</div> <div class="video year-2012">...</div> <div class="video year-2012">...</div> </div> my jquery should following transformation:
<div class="videos"> <div class="videogroup group-2013"> <div class="video year-2013">...</div> <div class="video year-2013">...</div> <div class="video year-2013">...</div> </div> <div class="videogroup group-2012"> <div class="video year-2012">...</div> <div class="video year-2012">...</div> <div class="video year-2012">...</div> </div> </div> my plan unique years connected year- classes (so array of containing 2013 , 2012 in case) , iterate through each one, selecting corresponding <div>s , applying transformation.
my question how can use jquery create array holding years year- class while making sure values unique , not manually entered?
previously, tried looping through elements , grabbing classes included classes (like video class). not mention, wanted grab year didn't case.
an example of tried previously:
var years = []; $('[class*=year-]').each(function() { years.push($(this).attr('class')); }); console.log(years); the code fails because i'm storing whole classes , not removing duplicates - both things i'm not sure how do.
i javascript coding exercise in morning:
// find unique classes var uniqueclasses = {}; $(".videos div").each(function() { var classes = $(this).attr('class').split(/\s+/); $.each(classes, function(index, classname) { // ignore "video" class if (classname === "video") { return; } uniqueclasses[classname] = true; }); }); // restructure dom, wrapping each set of unique classes $.each(uniqueclasses, function(classname) { var groupclass = "group-" + classname.split("-")[1]; $("." + classname).wrapall($("<div/>") .addclass("video-group") .addclass(groupclass)); }); jsfiddle here: http://jsfiddle.net/dmillz/znxhl/
hope helps!
Comments
Post a Comment