I don't know why but the code belows doesn't work in Firefox. It goes perfect in Chrome.
// Buttons marker
$( "#second button" ).click(function() {
$( this ).toggleClass('selected');
$( this ).toggleClass('unselected');
$( this ).toggleClass('btn-warning');
$( this ).toggleClass('btn-default');
});
// Ads switcher
$( "#second button" ).click(function() {
var category = $( this ).attr( "name");
$( ".ad[data-category="+category+"]" ).toggle( "slow" );
});
// Hide all categories but newmotos when load website
$( document ).ready(function() {
$( ".ad[data-category=usedmotos" ).hide();
$( ".ad[data-category=spares" ).hide();
$( ".ad[data-category=accessories" ).hide();
});
Any suggestion? I thought that JQuery were multiplatform :/
EDIT: The code should hide some divs with the selected data-category and provide the power to show them with some buttons on the top.
I'm using other JS codes in the same webpage and these ones are working, I think this is important, because it's not crashing all the Javascript.
And Firebug dosen't say me nothing :(
EDIT 2: Adding my html. The code is the main of body only, I guess other isn't necessary.
<div id="main" role="main">
<!-- Section #1 / Cover -->
<section id="first" class="story" data-speed="8" data-type="background" data-offSetY="-432">
<article>
<h2>Tienda</h2>
</article>
</section>
<!-- Section #2 / Keycloud -->
<section id="second" class="point heads">
<article>
<div class="text">
<h5>Nube de palabras. Aquí van las palabras, selecciónalas. Y tal y eso y se marcarán, ya tu sabeh.</h5>
<h6>Básicamente es cómo funciona este sistema para ver tus peaso motos.</h6>
</div>
<div class="btn-group-vertical">
<div><span>CATEGORÍAS:</span></div>
<button type="button" class="selected btn btn-warning" name="newmotos">Motos nuevas</button>
<button type="button" class="selected btn btn-warning" name="usedmotos">Motos de ocasión</button>
<button type="button" class="selected btn btn-warning" name="spares">Recambios</button>
<button type="button" class="selected btn btn-warning" name="accessories">Accesorios</button>
</div>
</article>
</section>
<!-- Section #3 / Bulletin -->
<section id="third" class="point heads">
<h4 class="line-divider">ANUNCIOS</h4>
<article>
<div class="ad" data-category="newmotos">
<img src="images/ads/ad01/1.jpg" />
<div>
<h6>Piaggio Liberty 49cc</h6>
<p>Se vende motor en muy buen estado, procendete de un golpe tambien todo el despiece de esta moto y el de una 49! saludos! motores desde 250 euros! </p>
<fieldset>
<span class="label label-success">250€</span>
<span class="label label-default">49cc</span>
<span class="label label-info">5.000km</span>
<span class="label label-warning">Blanca</span>
</fieldset>
</div>
</div>
<div class="ad" data-category="usedmotos">
<img src="images/ads/aprilia.jpg" />
<div>
<h6>Aprilia RS 49cc</h6>
<p>Vendo moto varata de serie solo pasarle la itv y yasta 550€ negociables interesados Atiendo wasap.. Color negro </p>
<fieldset>
<span class="label label-info">550€</span>
<span class="label label-info">49cc</span>
<span class="label label-default">15.000km</span>
<span class="label label-default">Negra</span>
</fieldset>
</div>
</div>
<div class="ad" data-category="spares">
<img src="images/ads/puente.jpg" />
<div>
<h6>Puente culata Kawasaki 450 </h6>
<p>Vendo puentes de los arboles de lebas de culata de KAWASAKI KXF valido para KXF 450 del 2006 al 2008 </p>
<fieldset>
<span class="label label-default">150€</span>
<span class="label label-default">Modelo 450</span>
<span class="label label-default">2006</span>
</fieldset>
</div>
</div>
</article>
</section>
EDIT 3: The web it's not loading the 'ads-controller.js' the file where the code is. The code belows is how I insert the JS files.
</div> <!-- // End of #main -->
<!-- Our Javascript, starting with jQuery -->
<script src='js/libs/jquery-1.6.1.min.js'></script>
<script src="js/libs/slimbox/slimbox2.js"></script>
<script src="js/ads-controller.js"></script>
<script src="js/scroller.js"></script>
<script src="js/parallax.js"></script>
SOLVED: It was the extension 'Ad Blocker'. Because the 'ads' in the file name. I just renamed as 'controller.js' and works perfectly. Thanks everybody!
To make your code more DRY, chain and use CSS selectors:
// Buttons marker
$( "#second button" ).click(function() {
$( this )
.toggleClass('selected')
.toggleClass('unselected')
.toggleClass('btn-warning')
.toggleClass('btn-defualt');
});
// Ads switcher
$( "#second button" ).click(function() {
var category = $( this ).attr( "name");
$( ".ad[data-category="+category+"]" ).toggle( "slow" );
});
// Hide all categories but newmotos when load website
$( document ).ready(function() {
$( ".ad[data-category='usedmotos'], .ad[data-category='spares'], .ad[data-category='accessories']" ).hide();
});
Here's a fiddle.
Correct you code here:
Before:
$( ".ad[data-category=usedmotos" ).hide();
$( ".ad[data-category=spares" ).hide();
$( ".ad[data-category=accessories" ).hide();
After:
$( ".ad[data-category='usedmotos']" ).hide();
$( ".ad[data-category='spares']" ).hide();
$( ".ad[data-category='accessories']" ).hide();
Also enclose your code into DOM ready as following:
// Hide all categories but newmotos when load website
$( document ).ready(function() {
$( ".ad[data-category='usedmotos']" ).hide();
$( ".ad[data-category='spares']" ).hide();
$( ".ad[data-category='accessories']" ).hide();
// Buttons marker
$( "#second button" ).click(function() {
$( this ).toggleClass('selected');
$( this ).toggleClass('unselected');
$( this ).toggleClass('btn-warning');
$( this ).toggleClass('btn-default');
});
// Ads switcher
$( "#second button" ).click(function() {
var category = $( this ).attr( "name");
$( ".ad[data-category="+category+"]" ).toggle( "slow" );
});
});
It was the AdBlock extension catching the ad term.
Related
I have multiple div elements with similar buttons that have the same class name, I am trying to trigger the event handlers respective of the button I click. I have tried the "each" jquery function but it only triggers the first element. I tried using document on click too. i added stopPropagation and preventDefault too.
<div id="overview-comment-container" class="social-comment-container">
<ul class="comments-list">
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="commentinfo-block-wrapper">
<div id="distinct-user-comment" contenteditable="false">Salute</div>
</div>
<div class="comment-buttons" style="display: none;">
<button id="update-button" class="social-update-button"> Update </button>
<button id="cancel-button" class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="comment-block-wrapper">
<div id="distinct-user-comment"
contenteditable="false">Hello</div>
</div>
<div class="comment-buttons" style="display: none;">
<button id="update-button" class="social-update-button"> Update </button>
<button id="cancel-button" class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
</ul>
</div>
$( '.edit-img' ).each( function() {
$(this).click( function(e) {
e.stopPropagation();
var editComment = $( '#distinct-user-comment' );
var editCommentText = editComment.text();
$( '.delete-comment' ).css( "visibility", "hidden" );
$( '.edit-comment' ).css( "visibility", "hidden" );
editComment.html( '<textarea class="editPostedComment" placeholder="'+ editCommentText + '"style="width: 60%;">'
+ editCommentText +
'</textarea>' );
$( '.editPostedComment' ).one('focus', function() {
$( this ).text( editCommentText );
});
$('.comment-buttons' ).show();
});
});
$( '#cancel-button' ).click( function(e) {
e.stopPropagation();
e.preventDefault();
var onEditComment = $( '.editPostedComment' );
onEditComment.replaceWith('<div id="distinct-user-comment" contenteditable="false">' + onEditComment.attr('placeholder') + '</div>');
$( '.comment-buttons' ).hide();
$( '.delete-comment' ).css( "visibility", "visible" );
$( '.edit-comment' ).css( "visibility", "visible" );
});
The reason only first comment is handled is having same ID for multiple elements. ID is meant to be unique and only first of the element with same IDs are selected, always.
Secondly, you have to establish a context that identifies a comment and then refer everything inside that context. In your case it is the 'li' tag with class 'posted-video-comment'.
We will use JQuery's closest() method to find the parent 'li' and then use .find() method inside the 'li' every time we want to refer to an element, by class, for that comment.
Here is the html:
<div id="overview-comment-container" class="social-comment-container" style="border-bottom: 2px solid rgb(255, 255, 255);">
<ul class="comments-list">
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="distinct-user-name">Tope Babz</span>
<span class="distinct-timestamp">5 secs ago</span>
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="commentinfo-block-wrapper">
<div class="distinct-user-comment" contenteditable="false">Salute</div>
</div>
<div class="comment-buttons" style="display: none;">
<button class="social-update-button"> Update </button>
<button class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="distinct-user-name">Sergio</span>
<span class="distinct-timestamp">15 secs ago</span>
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="commentinfo-block-wrapper">
<div class="distinct-user-comment" contenteditable="false">Hello</div>
</div>
<div class="comment-buttons" style="display: none;">
<button class="social-update-button"> Update </button>
<button class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
</ul>
</div>
And here is the Javascript:
$('.edit-img').click(function(e) {
e.stopPropagation();
var $li = $(this).closest('.posted-video-comment');
var editComment = $li.find('.distinct-user-comment');
var editCommentText = editComment.text();
$li.find('.delete-comment').css("visibility", "hidden");
$li.find('.edit-comment').css("visibility", "hidden");
editComment.html('<textarea class="editPostedComment" placeholder="' + editCommentText + '"style="width: 60%;">' +
editCommentText +
'</textarea>');
$li.find('.editPostedComment').on('focus', function() {
$(this).text(editCommentText);
});
$li.find('.comment-buttons').show();
});
$('.social-cancel-button').click(function(e) {
e.stopPropagation();
e.preventDefault();
var $li = $(this).closest('.posted-video-comment');
var onEditComment = $li.find('.editPostedComment');
onEditComment.replaceWith('<div id="distinct-user-comment" contenteditable="false">' + onEditComment.attr('placeholder') + '</div>');
$li.find('.comment-buttons').hide();
$li.find('.delete-comment').css("visibility", "visible");
$li.find('.edit-comment').css("visibility", "visible");
});
And here is the working fiddle.
I need to add a custom functionality to a woocommerce single product page. The user needs to be able to click on an icon underneither the short description, which pops them down to the tab section, and opens the related tab.
Making it scroll down to the bottom is no problem, but opening the related tab I can not figure out. I have tried accessing the tab via URL (http://www.remicorson.com/access-woocommerce-product-tabs-directly-via-url/), but the problem with that is the page needs to reload. Any help I can get with this would be much appreciated.
Here is the code for the tabs I am working with:
function product_icon_set(){
echo "<div class='info-panel'>
<div class='learn_more img__wrap'>
<a href='#description_tab'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_MoreInformation_On.png.png' /></a>
<p class='img__description'>Desc.</p>
</div>
<div class='specs img__wrap'>
<a href='#specifications'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Specifications_On.png.png' /></a>
<p class='img__description'>Specs.</p>
</div>
<div class='dimension img__wrap'>
<a rel='prettyPhoto' title='My Picture 1' href='https://webdev/rbo/wp-content/uploads/2017/09/ITD1013-Hanging-Hose-Rack-Dimensions.jpg'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Demensions_On.png.png' /></a>
<p class='img__description'>Dimen.</p>
</div>
<div class='product_manual img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_OpsManual_On.png.png' /></a>
<p class='img__description'>Manual</p>
</div>
<div class='tech_tips img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Icon_Tech-Tips_On.png-copy.png' /></a>
<p class='img__description'>Tech Tips</p>
</div>
<div class='instal_video img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Installation_videos.png' /></a>
<p class='img__description'>Instal.</p>
</div>
</div>";
}
To recap, the user will click on a tab, that brings them to the tab section, and opens the related tab. Ex. Click specs icon, pop down to the section, and open the specifications tab.
I actually figured this out through jquery. You need to create a function that remove the class "active" from the current Li, then add it to the Li that you want active (the tab with the correct class), then do the same to the corresponding div ID for the content. Here is the function, along with tab code I am using.
function wc_change_tab() {
if( is_product() ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Activate Description Tab
$('.desc_tab_button').on('click', function () {
//disable active tab
$( 'li.active' ).removeClass( 'active' );
//enable desired tab
$( 'li.' + 'description' + '_tab' ).addClass( 'active' );
//disable active tab contents
$( 'div.active' ).removeClass( 'active' );
//enable desired tab contents
$( 'div#' + 'tab-description' ).addClass( 'active' );
});
// Activate Specs Tab
$('.specs_tab_button').on('click', function () {
//disable active tab
$( 'li.active' ).removeClass( 'active' );
//enable desired tab
$( 'li.' + 'additional_information' + '_tab' ).addClass( 'active' );
//disable active tab contents
$( 'div.active' ).removeClass( 'active' );
//enable desired tab contents
$( 'div#' + 'tab-additional_information' ).addClass( 'active' );
/*///// TEMPLATE FOR NEW ICON /// CHANGE OUT CLASS NAMES// Activate Specs Tab
$('.CHANGE_TO_ICON_CLASS').on('click', function () {
//disable active tab
$( 'li.active' ).removeClass( 'active' );
//enable desired tab
$( 'li.' + 'CHANGE_TO_TAB_CLASS_NAME' + '_tab' ).addClass( 'active' );
//disable active tab contents
$( 'div.active' ).removeClass( 'active' );
//enable desired tab contents
$( 'div#' + 'CHANGE_TO_TAB_ID_NAME' ).addClass( 'active' );*/
});
});
</script>
<?php
}
}
add_action( 'wp_footer', 'wc_change_tab', 26 );
// Icon Set
function product_icon_set(){
echo "<div class='info-panel'>
<div class='learn_more img__wrap'>
<a href='#tabs_product' class='desc_tab_button'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_MoreInformation_On.png.png' /></a>
<p class='img__description'>Desc.</p>
</div>
<div class='specs img__wrap'>
<a href='#tabs_product' class='specs_tab_button'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Specifications_On.png.png' /></a>
<p class='img__description'>Specs.</p>
</div>
<div class='dimension img__wrap'>
<a rel='prettyPhoto' title='My Picture 1' href='https://webdev/rbo/wp-content/uploads/2017/09/ITD1013-Hanging-Hose-Rack-Dimensions.jpg'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Demensions_On.png.png' /></a>
<p class='img__description'>Dimen.</p>
</div>
<div class='product_manual img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_OpsManual_On.png.png' /></a>
<p class='img__description'>Manual</p>
</div>
<div class='tech_tips img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Icon_Tech-Tips_On.png-copy.png' /></a>
<p class='img__description'>Tech Tips</p>
</div>
<div class='instal_video img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Installation_videos.png' /></a>
<p class='img__description'>Instal.</p>
</div>
</div>";
}
I have code something like that :
<div class="fieldset clearfix">
<h2 class="fieldset_title">Title <i class="indicator glyphicon pull-right glyphicon-chevron-down"></i></h2>
<div class="fieldsgroup_info"></div>
<div class="fieldsgroup">
....
</div>
</div>
When I do in jquery
$('.fieldset_title').click(function(){
$( this ).closest( ".fieldsgroup" ).hide();
});
Seems not working, do you have an idea why it doesn't work?
Thanks
.fieldsGroup is the sibling of .fieldset_title not its parent, so replace
$( this ).closest( ".fieldsgroup" ).hide();
with siblings
$( this ).siblings( ".fieldsgroup" ).hide();
Or as suggested by A.Wolff in his comment below
$( this ).nextAll(".fieldsgroup").first().hide();
I am trying to change the display property of a div based on if the carousel image is active at the time. I have gotten it to work but it only works when i doubleclick. With a single click it displays the div corresponding to the previous active image instead of the current one. Please HELP.
=====================================
CODE BELOW
HTML
<div class="container-fluid" id="siteImgs">
<div class="row col-xs-12 col-md-7">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" id="lg" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" id="ma"></li>
<li data-target="#myCarousel" data-slide-to="2" id="sz"></li>
<li data-target="#myCarousel" data-slide-to="3"id="ti"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="img/work/lookingGlass.png" alt="looking glass">
</div>
<div class="item">
<img src="img/work/mauriceSite.png" alt="maurice site">
</div>
<div class="item">
<img src="img/work/sza.png" alt="sza">
</div>
<div class="item">
<img src="img/work/tina.png" alt="tina">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!--INFORMATION DIVS-->
<div class="row col-xs-12 col-md-5 lookingGlass lg">
<h1>THE LOOKING GLASS</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass ma">
<h1>MAURICEDANIELS.COM</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass sz">
<h1>SZA</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass ti">
<h1>TINA D. PHOTOGRAPHY</h1>
<p>Lorem ipsum</p>
</div>
JS/JQUERY
$( '.ma' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
$( ".carousel-control" ).click(function() {
if ( $( '#lg' ).hasClass( "active" ) ) {
$( '.lg' ).show(),
$( '.ma' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#ma' ).hasClass( "active" ) ) {
$( '.ma' ).show(),
$( '.lg' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#sz' ).hasClass( "active" ) ) {
$( '.sz' ).show(),
$( '.lg' ).hide();
$( '.ma' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#ti' ).hasClass( "active" ) ) {
$( '.ti' ).show(),
$( '.lg' ).hide();
$( '.sz' ).hide(),
$( '.ma' ).hide();
}
});
Full Example HERE
You can use the slide event for this.
$('#myCarousel').on('slide.bs.carousel', function (e) {
var index = $(e.relatedTarget).index();
var obj = $('[data-slide-to="' + index + '"]').attr('id');
$('.lookingGlass').hide(); // all individual hide() that you had in your code can be replaced by targeting the divs with class
$('.' + obj).show();
})
Fiddle demo
Also another way is to remove the ids from the carousel indicators and add it as a data-attribute to div.item something like this <div class="item" data-target="lg"> and use it like this
$('#myCarousel').on('slide.bs.carousel', function (e) {
var obj = $(e.relatedTarget).data('target');
$('.lookingGlass').hide();
$('.' + obj).show();
})
Demo fiddle
you could do something like that,
$( ".carousel-control" ).click(function() {
$(".carousel-indicators").each(function(){
var idActive = $(this).attr("id");
if($(".lookingGlass ").hasClass("idActive ")){
$(this).show();
}
$(".lookingGlass").hide();
});
});
And im not if its gonna work just wrote it here, can check it after 15 min from now on, but maybe its help you now.
I'm not sure if this will work, but looking at your site, and how the carousel works, there is a delay to which the class "active" is applied when images/slides are switching. I think whats happening is that this delay causes the carousel's bootstrap js to mismatch a little with your custom js, so that when you click, the previous slide is still active, then the bootstrap js kicks in and switches the slide, but your js has already executed, thus causing the mismatch in divs vs images displayed. Instead of using "active" class to determine, try using:
if ($('#ti').hasClass("next") || $('#ti').hasClass("prev") {
// do stuff here
}
I started some time studying javascript, and I have some questions and was wondering if you can do this.
I have a div:
<div class="category"> </div>
it automatically repeats everytime I create a new category in a forum system. this is default "so there is no possibility to manually"
So wanted it to be added numbering for each category. thereby:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
and so on, all this through jquery or javascript.
If it is possible what is the way?
jQuery solution:
$( ".category" ).each( function( index ) {
$( this ).addClass( "category"+(index+1) );
});
Result:
<div class="category category1"> </div>
<div class="category category2"> </div>
<div class="category category3"> </div>
<div class="category category4"> </div>
Solution 2:
$( ".category" ).each( function( index ) {
$( this ).removeClass( "category" ).addClass( "category"+(index+1) );
});
Result:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
FIDDLE
HTML
<button id="category-button">Add Category</button>
<div id="category-container"></div>
Javascript
$('#category-button').on('click', function() {
var $container = $('#category-container'),
$elem = $('<div/>', {
"class": "category" + ($container.children().length + 1)
});
$container.append($elem);
});