更改相同名稱的類嵌套的內容是具有相同類的div

我有一個帶有標籤和其他東西的div。該標籤包含以下內容：「步驟1」。更改相同名稱的類嵌套的內容是具有相同類的div

<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>

如果你點擊我使用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個「第3步」等。我該怎麼做呢？

!!!!編輯!!!!
感謝您的快速解答！但我忘了說我也有可能刪除一部分。我這樣做，

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

所以，如果我用阿倫P佐尼的其中工程:)每條添加的內容將與步驟1，2，3，等被貼上了答案。但是當用戶刪除例如第二步時，現在的步驟將如下所示：1,3,4等等。我如何解決這個問題？

來源

2013-05-15 Niek Nijland

嘗試

編輯：重新編制項目刪除後

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

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

來源

2013-05-15 10:08:30

謝謝，我更新了我的問題，你可以看看這個？ –

@NiekNijland查看更新後的答案 –

你可以這樣做：

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

來源

2013-05-15 10:07:11

通過計算你的號碼，然後使用你的步數：

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

來源

2013-05-15 10:07:46

用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>

來源

2013-05-15 10:19:34 hgwd92

更改相同名稱的類嵌套的內容是具有相同類的div

回答

相關問題