javascript - jQuery scan through div class name, use those class names to print matching checkboxes -

-

i'm new javascript/jquery , wondering if @ possible collect div's class names , create checkboxes based on class names jquery. example. 

<div class="champ">   <h3>reading</h3> </div>  <div class="league1">   <h3>sheffield wednesday</h3> </div>  <div class="prem">   <h3>sunderland</h3> </div>  <div class="prem">   <h3>tottenham hotspur</h3> </div>  <div class="champ">   <h3>watford</h3> </div>

say html file associated class names, result spit out checkboxes class names present divs while avoiding duplication of same class name.

so example above end looking like

  • champ
  • league1
  • prem

any appreciated thanks.

i'd suggest:

// creating new elements: var newcheckbox = $('<input />', {     'type' : 'checkbox',     'name' : 'ukfootballclubs' }),     newlabel = $('<label />');     wrapper = $('<div />').appendto('body'); // iterating on each div has class: $('div[class]').each(function(){     /* appending cloned label element, text set class-name        of current div element: */     newlabel.clone().text(this.classname).appendto(wrapper);     /* appending clone of new checkbox new label,         allows click on label un/select checkbox: */     newcheckbox.clone().prependto(wrapper.find('label').last()); });

js fiddle demo.

a altered version uses team-names (from div) label-text in order avoid having 2 check-boxes prem text:

var newcheckbox = $('<input />', {     'type' : 'checkbox',     'name' : 'ukfootballclubs' }),     newlabel = $('<label />');     wrapper = $('<div />').appendto('body'); $('div[class]').each(function(){     newlabel.clone().text($(this).text()).appendto(wrapper);     newcheckbox.clone().prependto(wrapper.find('label').last()); });

js fiddle demo.

however, if rather use class-names ('prem', 'champ', etc) can prevent duplicate checkbox-text checking existence of element contains text before appending new element text:

var newcheckbox = $('<input />', {     'type' : 'checkbox',     'name' : 'ukfootballclubs' }),     newlabel = $('<label />');     wrapper = $('<div />').appendto('body'); $('div[class]').each(function(){     var text = $.trim(this.classname);     if (!wrapper.find('label:contains('+text+')').length) {         newlabel.clone().text(text).appendto(wrapper);         newcheckbox.clone().prependto(wrapper.find('label').last());     } });

js fiddle demo.

references:


Comments

Post a Comment

Popular posts from this blog

design - Custom Styling Qt Quick Controls -

-
Image
i have custom design qt quick controls. example, change background colour of tool bar, since hate default design. how can that? in qt quick controls, there limited styling available via qt quick control styles items, buttonstyle , checkboxstyle , etc. at moment, other styles require delving qt sources , messing internal details. here complete example of how 1 might modify toolbar's style. main.qml import qtquick 2.1 import qtquick.layouts 1.0 import qtquick.controls 1.0 applicationwindow { toolbar: toolbar { id: toolbar component.oncompleted: toolbar.data[0].item.children = [newrectangle]; property item _newrectangle: rectangle { // rectangle within toolbarstyle's panel // gleaned from: // http://qt.gitorious.org/qt/qtquickcontrols/source/ // c304d741a27b5822a35d1fb83f8f5e65719907ce:src/styles/base/toolbarstyle.qml id: newrectangle anchors.fill: parent...
Read more

Unable to remove the www from url on https using .htaccess -

-
i want remove www site url. ie. https://www.domainname.com.au https://domainname.com.au . i have tried various .htacces code nothing work me. here present code remove www http not work https. rewriteengine on rewritebase / rewritecond %{http_host} ^www\.(.*)$ [nc] rewriterule ^/(.*)$ http://%1/$1 [r=301,l] rewritecond %{https} off rewriterule ^(.*)$ https://domainname.com.au/$1 [r=301,l] rewriterule ^code-of-conducts/(.*)/$ code-of-conducts.php?type=$1 rewriterule ^parents/post-a-job/(.*)/edit/$ parents/post-a-job.php?action=edit&id=$1 rewriterule ^parents/post-a-job/(.*)/$ parents/post-a-job.php?job_type=$1 rewriterule ^parents/open-jobs/(.*)/delete/$ parents/open-jobs.php?action=delete&id=$1 rewriterule ^parent-profile/(.*)/$ parent-profile.php?id=$1 rewriterule ^parents/job-details/(.*)$ parents/job-details.php?applied_id=$1 rewriterule ^sitterprofile/(.*)/$ sitterprofile.php?id=$1 rewriterule ^sitter/job-board/state/(.*)/page/(.*)/$ sitter/job-board.ph...
Read more