Javascript jQuery计数链接和元素

我正在编写一个简单的jquery代码段，其中我在每个元素中添加了一个计数元素的数字。但有什么地方出了问题

我添加了一个链接和元素，每个现有元素的编号为

#links span

，但在开始时，我的函数将数字1、1、2、3、4等添加到链接编号，因为他第一次没有看到

#links span

观察我的JSFIDLE以了解我的问题：

函数编号（）{
var数=0；
if（$（'#links span'）.length像这样更新代码

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>');
});

函数编号（）{
返回$（'#links span'）.length；
}
$（'#添加'）。在（'单击'，函数（）{
$（'#links'）。追加（'Link'+（numbers（）+1）+'
'）；
$（'#elements'）。追加（'Element'+numbers（）+''）；
});

像这样更新代码

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>');
});

函数编号（）{
返回$（'#links span'）.length；
}
$（'#添加'）。在（'单击'，函数（）{
$（'#links'）。追加（'Link'+（numbers（）+1）+'
'）；
$（'#elements'）。追加（'Element'+numbers（）+''）；
});

像这样更新代码

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>');
});

函数编号（）{
返回$（'#links span'）.length；
}
$（'#添加'）。在（'单击'，函数（）{
$（'#links'）。追加（'Link'+（numbers（）+1）+'
'）；
$（'#elements'）。追加（'Element'+numbers（）+''）；
});

像这样更新代码

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>');
});

函数编号（）{
返回$（'#links span'）.length；
}
$（'#添加'）。在（'单击'，函数（）{
$（'#links'）。追加（'Link'+（numbers（）+1）+'
'）；
$（'#elements'）。追加（'Element'+numbers（）+''）；
});

问题是您调用了多次数字（）更新函数返回的值，请重试：

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>'); 
});

函数编号（）{
变量编号=$（'#链接跨度'）。长度+1；
返回号码；
}
$（'#添加'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$numb=numbers（）；
$（'#links'）。追加（'Link'+$numb+'
'）；
$（'#elements'）.append（'Element'+$numb+''）；
});

问题是您调用了多次数字（）更新函数返回的值，请重试：

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>'); 
});

函数编号（）{
变量编号=$（'#链接跨度'）。长度+1；
返回号码；
}
$（'#添加'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$numb=numbers（）；
$（'#links'）。追加（'Link'+$numb+'
'）；
$（'#elements'）.append（'Element'+$numb+''）；
});

问题是您调用了多次数字（）更新函数返回的值，请重试：

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>'); 
});

函数编号（）{
变量编号=$（'#链接跨度'）。长度+1；
返回号码；
}
$（'#添加'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$numb=numbers（）；
$（'#links'）。追加（'Link'+$numb+'
'）；
$（'#elements'）.append（'Element'+$numb+''）；
});

问题是您调用了多次数字（）更新函数返回的值，请重试：

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>'); 
});

函数编号（）{
变量编号=$（'#链接跨度'）。长度+1；
返回号码；
}
$（'#添加'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$numb=numbers（）；
$（'#links'）。追加（'Link'+$numb+'
'）；
$（'#elements'）.append（'Element'+$numb+''）；
});

试试这个：

$('#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 />');
});

$（'add'）。在（'click'，function（）上{
变量编号=$（'.element'）。长度+1；
$（'#elements'）。追加（'Element'+number+''）；
$（'#links'）。追加（'Link'+number+'
'）；
});

试试这个：

$('#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 />');
});

$（'add'）。在（'click'，function（）上{
变量编号=$（'.element'）。长度+1；
$（'#elements'）。追加（'Element'+number+''）；
$（'#links'）。追加（'Link'+number+'
'）；
});

试试这个：

$('#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 />');
});

$（'add'）。在（'click'，function（）上{
变量编号=$（'.element'）。长度+1；
$（'#elements'）。追加（'Element'+number+''）；
$（'#links'）。追加（'Link'+number+'
'）；
});

试试这个：

$('#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 />');
});

$（'add'）。在（'click'，function（）上{
变量编号=$（'.element'）。长度+1；
$（'#elements'）。追加（'Element'+number+''）；
$（'#links'）。追加（'Link'+number+'
'）；
});

首先多次调用
number（）
函数。不需要这样做。简单编写：

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

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

首先多次调用
number（）
函数。不需要这样做。简单编写：

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

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

首先多次调用
number（）
函数。不需要这样做。简单编写：

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

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

首先多次调用
number（）
函数。不需要这样做。简单编写：

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

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

OP可能需要
.length+1
，而且，不需要
parseInt
int@AnoopJoshi是的，我知道，但可以在5分钟内完成。OP可能需要
.length+1
，而且，也不需要
parseInt
一个int@AnoopJoshi是的，我知道，但可以在5分钟内完成。OP可能还需要
。长度+1
，无需
parseInt
int@AnoopJoshi是的，我知道，但可以在5分钟内完成。OP可能需要
.length+1
，而且，也不需要
parseInt
一个int@AnoopJoshi是的，我知道，但可以在5分钟内完成。请注意，您不是
var
ing
number
，也是大写的第一个字母variabl对于非构造函数，在JavaScriptDone中是不寻常的，我写得很快：）因此，在小提琴上，我声明了类似于全局变量的数字。感谢更正。请注意，您不是
var
ing
number
，而且非构造函数的大写首字母变量在JavaScriptDone中是不寻常的，我写得很快：）因此，在小提琴上，我声明了类似于全局变量的数字。感谢更正。请注意，您不是
var
ing
number
，也是非构造函数的大写首字母变量在JavaScriptDone中是不常见的，我写得很快：）所以在小提琴上我声明了数字l