appending a class to an element based on its data-html using javascript -
i want append class 'activetab' tag on document ready. need select tag it's data-html i'm not sure how this.
so how html loads currently:
<ul class="tabbedgroupings_tabs"> <li class="tg_tab" data-html="academicprofessionalanddevelopment">academic, professional , development</li> <li class="tg_tab" data-html="cultural">cultural</li> <li class="tg_tab" data-html="physicalactivityandperformance">physical activity , performance</li> <li class="tg_tab" data-html="politicsreligionandcampaigning">politics, religion , campaigning</li> <li class="tg_tab" data-html="society">society</li> <li class="tg_tab" data-html="specialinterest">special interest</li> <li class="tg_tab" data-html="all">all</li> </ul>
i add 'activetab' class data-html="all"
element.
you can use jquery attribute selector. $("[attribute]")
, selects elements have specified attribute value equal value.attribute-equals-selector
$(document).ready(function() { $(".tabbedgroupings_tabs > [data-html='all']").addclass('activetab'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="tabbedgroupings_tabs"> <li class="tg_tab" data-html="academicprofessionalanddevelopment">academic, professional , development</li> <li class="tg_tab" data-html="cultural">cultural</li> <li class="tg_tab" data-html="physicalactivityandperformance">physical activity , performance</li> <li class="tg_tab" data-html="politicsreligionandcampaigning">politics, religion , campaigning</li> <li class="tg_tab" data-html="society">society</li> <li class="tg_tab" data-html="specialinterest">special interest</li> <li class="tg_tab" data-html="all">all</li> </ul>
Comments
Post a Comment