CODEWITHSUNDEEP
javascriptjqueryhtml
Robbert
Robbert

Reputation: 1330

jQuery count link and element

I am working on a simple jquery snippet where I add a number on the hand of counted elements to each element. But is something going wrong.

I add a link and element with a number for each existing element as #links span, but in the beginning my function gives the numbers 1, 1, 2, 3, 4 etc to the link number, because he sees no #links span's the first time.

Watch my jsFiddle to understand my problem: http://jsfiddle.net/RVermeulen/26VeD/

function numbers() {
    var number = 0;
    if($('#links span').length <= 1) {
        number = 1;       
    } else {
        number = $('#links span').length;       
    }
    return number;

}

$('#add').on('click', function() {
    $('#links').append('<span number="'+ numbers() +'">Link'+ numbers() +'</span><br />'); 
   $('#elements').append('<div class="element">Element '+ numbers() +'</div>'); 
});

Upvotes: 0

Views: 1150

Answers (4)

Alex Char
Alex Char

Reputation: 33218

First you call number() function lot times. There is no need for this. Simple write:

$('#add').on('click', function() {   
    var num = numbers();

   $('#links').append('<span number="'+ num +'">Link'+ num +'</span><br />'); 
   $('#elements').append('<div class="element">Element '+ num +'</div>'); 
});

Second you need to increase by 1 length of span each time so i ended to this:

function numbers() {
     return   number = $('#links span').length + 1;       
}

fiddle

Upvotes: 0

Wilfredo P
Wilfredo P

Reputation: 4076

The problem is that you are callng Multiple times the number() updating the value that function return try:

function numbers() {
    var number = $('#links span').length + 1; 
    return number;

}

$('#add').on('click', function(e) {
    e.preventDefault();
    var $numb = numbers();
    $('#links').append('<span number="'+ $numb +'">Link'+ $numb +'</span><br />'); 
   $('#elements').append('<div class="element">Element '+ $numb +'</div>'); 
});

DEMO

Upvotes: 2

Vikram
Vikram

Reputation: 713

Try this:

$('#add').on('click', function() {
    var number=$('.element').length+1;
   $('#elements').append('<div class="element">Element '+ number +'</div>');
      $('#links').append('<span number="'+ numbers +'">Link'+ number +'</span><br />');
});

fiddle

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Update your code like this

function numbers() {
    return $('#links span').length;
}

$('#add').on('click', function () {
    $('#links').append('<span number="' + numbers() + '">Link' + (numbers() + 1) + '</span><br />');
    $('#elements').append('<div class="element">Element ' + numbers() + '</div>');
});

Fiddle

Upvotes: 1

Related Questions