CODEWITHSUNDEEP
jquery
Niek Nijland
Niek Nijland

Reputation: 772

Change content of classes with the same name nested is divs with the same class

I have a div with a label and some other stuff. The label has as content: "Step 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>

If you click on another div on the page I use jQuery to add exactly the same copy as the code up here and place it behind this code.

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

This is repeatable as many times as the user wants.

But this way all the labels with class steps will have the content: "Step 1". I want the second one to have "Step 2", third one "Step 3" and so on. How do I do this?

!!!!EDIT!!!!
Thanks for the quick answers! But I forgot to say that I also have a possibility to remove a part. I do that 

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

So if I use the answer of Arun P Johny which works:) Each piece of content added will be labeled with Step 1, 2, 3, and so on. But when the user removes for example the second step, the steps will now be like: 1,3,4 and so on. How do I fix that?

Upvotes: 0

Views: 458

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388416

Try

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

Edit: Reindex the items after remove

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

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

Upvotes: 2

hgwd92
hgwd92

Reputation: 69

With the css counter element:

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075169

By counting the number you have and then using that for your step number:

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

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You could do:

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

Upvotes: 0

Related Questions