jQuery: get div instance number - javascript

I'm looking to get the instance number of a div, e.g. I have 4 instances of the .test div, and using .length just generates 4. But I want to put the instance number in each div, for example the 3rd instance of the .test div would have a 3 in it and so on.
jsFiddle demo: http://jsfiddle.net/neal_fletcher/YrtjF/
HTML:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
jQuery:
$(document).ready(function () {
var n = $(".test").length;
$('.test').html(n);
});
If this is at all possible? Any suggestions would be greatly appreciated!

Use the version of html() that takes a function as the parameter
$('.test').html(function (i) {
return i + 1
});
Demo: Fiddle

$(document).ready(function () {
var n = 1;
$('.test').each(function() {
$(this).html(n);
n++;
});
});

You can use this
$(document).ready(function () {
$(".test").html(function(i,v){
return i+1;
});
});
DEMO

you can use each method here
$(document).ready(function () {
$(".test").each(function(i){
$(this).html(i +1);
});
});

Related

How to duplicate div class color

I'm trying to make it comments counter div. If comments as 0 div class is red or more than 0 div class is blue, but javascript duplicating same colors.
$(function () {
if(parseInt($(".notification-counter").text()) > 0) {
//$(".notification-counter").hide();
$('.notification-container').addClass('notification-container2');
}
});
jsfiddle: http://jsfiddle.net/783h57zy/10/
thanks for answers!
You need to iterate over the divs using .each() and $(this):
$(function () {
$('.notification-container').each(function () {
if (parseInt($(this).text()) > 0) {
$(this).addClass('notification-container2');
}
})
});
jsFiddle example
$(function () {
$('.notification-counter')
.filter(function() {
return $(this).text() > 0;
}).parents('.notification-container')
.addClass('notification-container2');
});
jsfiddle
You need to iterate on the elements and then update the class.
You need to update your code to
$(function () {
$(".notification-counter").each(function(){
if(parseInt($(this).text()) > 0) {
//$(".notification-counter").hide();
$(this).parent().addClass('notification-container2');
}
});
});
Here is the updated fiddle - http://jsfiddle.net/783h57zy/12/
You need to loop through your divs and check them separately:
$.each: loop through divs
'.parent()': get the container div
$(this): use the current object
$(function () {
$('.notification-counter').each(function () {
if (parseInt($(this).text()) > 0) {
$(this).parent().removeClass('notification-container').addClass('notification-container2');
} else {
$(this).parent().removeClass('notification-container2').addClass('notification-container');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notification-container">
<div class="notification-counter">200</div>
</div>
<div class="notification-container">
<div class="notification-counter">0</div>
</div>
Since there are many instances of the same class on the page, you need to run through each instance and make the decision based on each element.
$(function () {
$('.notification-counter').each(function(){
if( parseInt($(this).html()) === 0 ) {
$(this).addClass('notification-container2');
}
});
});
Updated: http://jsfiddle.net/783h57zy/14/

JQuery: .remove() does not work properly

Here is my html and codes :
<div id="rptCategoryProducts">
<ul class="productsUl">
</ul>
</div>
removing scritp :
$("#btnFilter").click(function () {
$(".productsUl li").each(function () {
this.remove();
});
currentPage = 0;
InfiniteScroll(0, 1000);
});
adding script:
$(".productsUl").append("<li>" + productInnerHtml + "</li>");
But it doesn't remove and also when I watch the steps in Mozilla Firebug I saw it stops after this.remove(); line.
Do you have suggestion?
or even simpler:
$(".productsUl li").remove();
;-)
You need to use $(this) to refer to the li element
$("#btnFilter").click(function () {
$(".productsUl li").each(function () {
$(this).remove();
});
currentPage = 0;
InfiniteScroll(0, 1000);
});
http://jsfiddle.net/Gwbmw/
When you loop through a jQuery object using each, you get the elements themselves, not each element wrapped in a jQuery object. You need to wrap each element in a jQuery object to use the remove method:
$(".productsUl li").each(function () {
$(this).remove();
});
However, you don't even need to loop through the elements, just use the remove method on the jQuery object containing all the elements:
$(".productsUl li").remove();
You need $(this) instead of this -
$(".productsUl li").each(function () {
$(this).remove();
});
You shoud try this:
$(this).remove();
instead of
this.remove();
Missing '$'. Try:
$(".productsUl li").each(function () {
$(this).remove();
});
In each callback, this points to the dom element reference not to the jquery object reference. So you need to get the jquery object reference of the item before calling remove()
$(".productsUl li").each(function () {
$(this).remove();
});
It can be done much easily
$(".productsUl > li").remove()
Strange. It works for me. look at this test:
[link]http://jsfiddle.net/bwqwD/

jquery - limiting toggleClass to 2 elements

<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
$(this).toggleClass('newclass');
});
});
</script>
This function changes the class of the selected column in my table. It works fine.
However it should not allow more than 2 columns being selected at once (by selected I mean the column having the new class toggled - newclass). So it simply should not react if other columns are clicked.
How would I do this? I could count how many columns currently use newclass and if it's 2 then cancel the function. I'm not sure how to count them or if this is the best way to do it.
here's one way to ensure no more than 2
jsfiddle
$('#mytable td').click(function() {
var $this = $(this);
// toggle 'on' if
// 1. it doesn't already have the class and
// 2. and there are less than two set to .newclass
// toggle 'off' if
// 1. it already has the class and
// 2. and there are less than two set to .newclass
$this.toggleClass('newclass',
!$this.hasClass('newclass') &&
$('#mytable .newclass').length < 2);
})
The size() method shows you how many other elements match that selector, so you can test against that before applying toggleClass():
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($("#mytable td.newclass").size() < 2)
{
$(this).toggleClass('newclass');
}
});
});
</script>
Try using the length property like this:
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($('#mytable td.newclass').length < 2)){
$(this).toggleClass('newclass');
}
});
});
</script>
Hope this helps!
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if(!$(this).hasClass('newClass')){
if($("td.newClass").size() < 2){
$(this).toggleClass('newclass');
}
}
else {
$(this).toggleClass('newclass');
}
});
});
</script>

JQuery: .index() returns -1

Here's main part of html:
<div id="table">
<div class="table_item">asd</div>
<div class="table_item">asd</div>
<div class="table_item">asd</div>
</div>
And JS (JQuery):
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($("#table").index($(this)));
});
});
click handling works but I ALWAYS get -1 from .index.
trying simply $(this).index(); shows the same result.
Please help! What's wrong with the code?
Do this instead:
$(document).ready( function()
{
var ti = $('.table_item');
ti.click( function()
{
alert(ti.index(this));
});
});
EDIT: Someone had a post that was deleted that was correct, and I think a little better than my code above:
$(document).ready( function()
{
$('.table_item').click( function()
{
alert($(this).index());
});
});
Working examples of both solutions: http://jsfiddle.net/FishBasketGordo/rx5e7/
You need to call index on a collection, in this case divs with class table_item
alert($(".table_item").index(this));
Since you are attaching a click() listener to $(".table_item"), you can reference the object by using $(this).
Try:
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($(this).index());
});
});

Increasing a number by 1 using jquery?

$('.fav').live('click', function(e){
$(this).toggleClass('highlight');
//increase the number by 1
html:
<li class="fav light_gray_serif">5</li>
how can i use jquery to increase the number between the li everytime its clicked? thanks
var num = parseInt($.trim($(this).html()));
$(this).html(++num)
You want to take a look at .html() or .text(). Here is an example:
$(this).text(function(i, t) {
return Number(t) + 1;
});
HTML:
<span id="counter">0</span>
jQuery:
$('#counter').text(Number($('#counter').text())+1);
You can increase the counter when clicking an existing button like this:
$(document).on('click','#your-button', function(){
$('#counter').text(Number($('#counter').text())+1);
});
Just use a plugin.
(function($) {
$.extend($.fn, {
"addOne": function() {
var num = parseInt(this.text(), 10);
this.text(++num);
},
"subtractOne": function() {
var num = parseInt(this.text(), 10);
this.text(--num);
}
});
}(jQuery))
Then call
$(".fav").live("click", function(e) {
$(this).toggleClass("highlight").addOne();
});

Categories

Resources