Copy a value from one element to another

Question

I am trying to copy a value of one span to another where the value of the first span is a number. There are multiple class string divs, i want the span value from the first one in each case.

This is my HTML structure that I have to work with

<button id="btn">Press it</button>

<div class="object">
    <div class="header">
        <span class="name">0</span>
    </div>
    <div class="children">
        <div class="string">
            <div class="header">
                <span class="name">Cheese</span>
            </div>
        </div>
        <div class="string"></div>
        <div class="string"></div>
        <div class="string"></div>
        <div class="string"></div>
    </div>
</div>

<div class="object">
    <div class="header">
        <span class="name">Biscuits</span>
    </div>
    <div class="children">
        <div class="string">
            <div class="header">
                <span class="name">Cheese</span>
            </div>
        </div>
        <div class="string"></div>
        <div class="string"></div>
        <div class="string"></div>
        <div class="string"></div>
    </div>
</div>

<div class="object">
    <div class="header">
        <span class="name">0</span>
    </div>
    <div class="children">
        <div class="string">
            <div class="header">
                <span class="name">Cheese</span>
            </div>
        </div>
        <div class="string"></div>
        <div class="string"></div>
        <div class="string"></div>
        <div class="string"></div>
    </div>
</div>

This is my code that I have so far, and its not working. Not sure where to go next.

jQuery(function ($) {
    $('#btn').click(function () {
        if ( $.isNumeric($('div object div.header span.name').text()) ) {
            $('div.object div.children div.string div.header span.name').html($('div.object div.header span.name').html());;
        }
    });
});

Milind Anantwar · Accepted Answer · 2015-07-23T15:37:25.030

2

You can use callback function .text() to return the text value based on condition:

$('#btn').click(function () {
     $('.object > .header .name').text(function(i,o){
       if($.isNumeric(o)){
             return $(this).parent().next().find('.header .name').text();
         }
     })
});

Working Demo

edited Jul 23 '15 at 15:37

answered Jul 23 '15 at 15:28

Milind Anantwar

81,290
25
94
125

What are those `(i,o)` parameters? Mind explaining? Thanks – pablito.aven Jul 23 '15 at 15:30
1

@pablito.aven: they are arguments of callback function where i refers to index and o refers to oldtext. they are optional . check the docs http://api.jquery.com/text/ – Milind Anantwar Jul 23 '15 at 15:31
@MilindAnantwar Its copying the number to name. I need it to copy the name to the number – Pedroson Jul 23 '15 at 15:33
@MilindAnantwar thats perfect thank you very much :) – Pedroson Jul 23 '15 at 15:40
@Pedroson: glad it helps :) – Milind Anantwar Jul 23 '15 at 16:46

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

I would do something like this:

var text_from_span = $('.object .header span.name').text();
if ($.isNumeric(text_from_span)){
  var spans_to_fill = document.getElementsByClassName('string');
  for(var i = (spans_to_fill.length - 1); i >= 0; i--){
    spans_to_fill[i].innerHTML = text_from_span;
  }
}

Reference

edited May 23 '17 at 11:44

Community

1
1

answered Jul 23 '15 at 15:40

pablito.aven

1,135
1
11
29

score 0 · Answer 3 · answered Jul 23 '15 at 15:27

0

It would be much easier if you could give an id to <span>. Then you could read the value as

var txt = $('#idofspan').text();

and set as

$('#otherspan').val(txt);

answered Jul 23 '15 at 15:27

Ujwal Ratra

391
2
13

I'm not able to add an id as the page is not static. – Pedroson Jul 23 '15 at 15:30
You can add an id even if the content is dynamic. – Ujwal Ratra Jul 23 '15 at 15:32
@UjwalRatra: what if there are 50 template like this?? OP will have to write the code individually for all 50 for targeting based on ID. which is definitely not a good way. – Milind Anantwar Jul 23 '15 at 15:34

score 0 · Answer 4 · answered Jul 23 '15 at 15:36

JS Fiddle: https://jsfiddle.net/Lwwy8909/

Goes a little like this:

With the use of an each loop and match to extract a number with any length of digit from the text.

jQuery(function ($) {
    $('#btn').click(function () {
        $('.object').each(function() {    
            if ( $.isNumeric($(this).find('.name:first').text().match(/\d+/)) ) {
                $(this).find('div.children').find('span.name').text($(this).find('.name:first').text().match(/\d+/));
            }
        });
    });
});

Copy a value from one element to another

4 Answers4

Working Demo