Easy Steps to Update Label Text with jQuery

Question

Easy Steps to Update Label Text with jQuery

This is a div element

<div>
    <label>some text 1</label>
    <label>another text 1</label>
</div>
<button>button</button>

Each time the button is clicked, a new div tag will be added. The digit in the label text of each new div should increment.

For example: The first div should have 1, the second div should have 2, and so on.

I am currently retrieving the label text using

var labelValue = $('div').find('label').map(function() {
   return $(this).text().replace(/\d/,2);
}).get();

My goal is to update the digit in the label text to 2.

Although I can fetch the value, the label text in the HTML remains unchanged.

How can I display the updated label value?

Apologies for any errors in my code.

javascript jquery html css

Answer 1

Answer №1

Give this a shot:

$('button').on('click', function(e) {
    $('div:eq(0)').clone().insertAfter('div:last').find('label').filter(function(e) {
        $(this).text($(this).text().replace(/\d/, $("div").length));
    });
})

Try it out on Fiddle

Answer 2

Give this a shot:

$('button').on('click', function(e) {
    $('div:eq(0)').clone().insertAfter('div:last').find('label').filter(function(e) {
        $(this).text($(this).text().replace(/\d/, $("div").length));
    });
})

Try it out on Fiddle

Answer 3

Answer №2

Perhaps this is the solution you are looking for: VIEW DEMO

<div id="show_divz">
    <div id="div_1">
        <label>some text 1</label>
        <label>another text 1</label>
    </div>
</div>
<button>button</button>

This code should be implemented in JavaScript:

$(document).on('click','button',function(){
    var getId = $(this).prev().find('div').last().attr('id');
    getId = getId.split('_');
    $("#show_divz").append('<div id="div_'+(parseInt(getId[1])+1)+'"><label>some text '+(parseInt(getId[1])+1)+'</label><label>another text '+(parseInt(getId[1])+1)+'</label> </div>');
});

Answer 4

Perhaps this is the solution you are looking for: VIEW DEMO

<div id="show_divz">
    <div id="div_1">
        <label>some text 1</label>
        <label>another text 1</label>
    </div>
</div>
<button>button</button>

This code should be implemented in JavaScript:

$(document).on('click','button',function(){
    var getId = $(this).prev().find('div').last().attr('id');
    getId = getId.split('_');
    $("#show_divz").append('<div id="div_'+(parseInt(getId[1])+1)+'"><label>some text '+(parseInt(getId[1])+1)+'</label><label>another text '+(parseInt(getId[1])+1)+'</label> </div>');
});

Answer 5

Answer №3

Here's an example:

$('section').find('span').each(function(){
 $(this).text($(this).text().replace(/\d/,8));
});

Answer 6

Here's an example:

$('section').find('span').each(function(){
 $(this).text($(this).text().replace(/\d/,8));
});

Answer 7

Answer №4

To achieve this, create an id for the button and trigger the click event. Give it a shot!

<div>
    <label>text 1 here</label>
    <label>more text 1</label>
</div>
<button id="btn">Click me!</button>
<script> 
    $('#btn').click(function(){
        $('div').find('label').each(function(){
            $(this).text($(this).text().replace(/\d/,2));
        }); 
    }); 
</script>

Check out the fiddle here: http://jsfiddle.net/UniqueUsername123/samplefiddle/

Answer 8

To achieve this, create an id for the button and trigger the click event. Give it a shot!

<div>
    <label>text 1 here</label>
    <label>more text 1</label>
</div>
<button id="btn">Click me!</button>
<script> 
    $('#btn').click(function(){
        $('div').find('label').each(function(){
            $(this).text($(this).text().replace(/\d/,2));
        }); 
    }); 
</script>

Check out the fiddle here: http://jsfiddle.net/UniqueUsername123/samplefiddle/

Answer 9

Answer №5

I trust this information proves useful,

let counter = 0;

$("#btn").click(function() {
    counter++;
    $("#lbl").html(counter);
}

</script>
<div><label id="lbl">1</label></div>

<button id="btn" type="button">Click Here</button>

Answer 10

I trust this information proves useful,

let counter = 0;

$("#btn").click(function() {
    counter++;
    $("#lbl").html(counter);
}

</script>
<div><label id="lbl">1</label></div>

<button id="btn" type="button">Click Here</button>

Answer 11

Answer №6

If you are looking to update the HTML content in this section, you can do so by using the following code:

$(this).html("updated content");

Answer 12

If you are looking to update the HTML content in this section, you can do so by using the following code:

$(this).html("updated content");

Easy Steps to Update Label Text with jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is the best way to generate an array containing multiple arrays, each filled with dynamic Divs?

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Styling a half circle in React Native

Is there a way to make the first Image Element within the div automatically clickable?

"Event triggered upon completion of jqgrid data retrieval from dataurl

What steps can I take to ensure that the @blur event functions correctly in Nuxtjs?

Creating a grid in JavaScript using a formula

My Node.js script is encountering the issue of HTML entities being inserted into the code

Animating ng-switch transitions within a div element

Include a pop-up with an image within a table - Shiny

Reorder the position of an item within an array

Loading numerous scripts utilizing jsdom.jQueryify

Why am I encountering http://localhost:3000/api/auth/error?error=AccessDenied when implementing Google signin in my Next.js application?

Retrieve image file from computer's hard drive

A step-by-step guide on how to use ajax and node to save a file onto

Encountering issues with integrating NPM package into Meteor.js

Angular CSS: ng-style applied to only one side, the other remains unaffected

Closing a dropdown on outside click in NEXT.JS can be done by adding an event

File Upload Error||The file type you are trying to upload is not permitted

Developing a website using custom modules in Node.js and Express framework