Question

我有一个标签和其他东西的div。标签的内容为：“第1步”。

<div class="methodContainer">
    <label class="steps">Step 1:</label>
    <textarea name="step" class="stepMethod glowingBorder"></textarea>
    <div class="removeMethod" title="Click to remove this ingredient">                                  
    </div>
</div>

如果单击页面上的另一个div，我使用jQuery添加与此处代码完全相同的副本，并将其放在此代码后面。

$('.plusMethod').click( function() {
    $('<div class="methodContainer"><label class="steps">Step 1:</label><textarea name="step" class="stepMethod glowingBorder"></textarea><div class="removeMethod" title="Click to remove this ingredient"></div></div>').appendTo('.partMethod');
}

这可以像用户想要的那样多次重复。

但是这样，所有带有类步骤的标签都将包含以下内容：“步骤1”。我希望第二个有“第2步”，第三个有“第3步”等等。我该怎么做？

!!!! EDIT !!!!
谢谢你的快速解答！但我忘了说我也有可能删除一部分。我这样做

$('.removeMethod').live('click', function() {
    $(this).parents('.methodContainer').remove();
}

因此，如果我使用Arun P Johny的答案，那么每个添加的内容都将标记为步骤1,2,3，依此类推。但是当用户移除例如第二步时，步骤现在将是：1,3,4等等。我该如何解决这个问题？

Answer 1

尝试

$('.plusMethod').click( function() {
    $('<div class="methodContainer"><label class="steps">Step ' + ($('.methodContainer').length + 1)  + ':</label><textarea name="step" class="stepMethod glowingBorder"></textarea><div class="removeMethod" title="Click to remove this ingredient"></div></div>').appendTo('.partMethod');
}

编辑：删除后重新索引项目

$('.removeMethod').live('click', function() {
    $(this).parents('.methodContainer').remove();

    $('.partMethod').children('.methodContainer').each(function(index, item){
        $(this).find('.steps').html('Step ' + (index + 1) + ':')
    })
}

Answer 2

你可以这样做：

$('.plusMethod').click( function() {
    $('<div class="methodContainer"><label class="steps">Step '+($('.steps').length+1)+':</label><textarea name="step" class="stepMethod glowingBorder"></textarea><div class="removeMethod" title="Click to remove this ingredient"></div></div>').appendTo('.partMethod');
}

Answer 3

通过计算您拥有的数字，然后将其用于您的步骤编号：

$('.plusMethod').click( function() {
    var $partMethod = $(".partMethod"); // I take it there's only one of these
    var stepNum = $partMethod.find(".steps").length + 1;
    $('<div class="methodContainer"><label class="steps">Step ' + stepNum + ':</label><textarea name="step" class="stepMethod glowingBorder"></textarea><div class="removeMethod" title="Click to remove this ingredient"></div></div>').appendTo($partMethod);
});

Answer 4

使用css计数器元素：

<!DOCTYPE html>
<html>
<head>
<style>
body {counter-reset:section;}
#doei h1 {counter-reset:subsection;}
#doei h1:after
{
counter-increment:section;
content:" Step " counter(section) ;
}
h2:after 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
<div id="doei">
<div id="hoi">
<h1>HTML tutorials</h1>
</div>

<div id="hoi">
<h1>Scripting tutorials</h1>
</div>

<div id="hoi">
<h1>XML tutorials</h1>
</div>
</div>

</body>
</html>

更改具有相同名称嵌套的类的内容是具有相同类的div

4 个答案: