leoarce
leoarce

Reputation: 549

How do I copy sibling to sibling in multiple different parents at the same time using jquery?

I have multiple parents, more than 2, but this is just example, and I would like to copy from all the base prices to all the own prices with a click of one button.

<button type="button" id="copybtn" class="btn">Copy</button>

<p class="baseownwrap">
    <label>thing1</label>
    <span class="baseprice">1</span>
    <input class="ownprice" type="text" value="" name="price[]">
</p>

<p class="baseownwrap">
    <label>thing2</label>
    <span class="baseprice">2</span>
    <input class="ownprice" type="text" value="" name="price[]">
</p>

//something like this, but this doesn't work
$('#copybtn').click(function(){
    $('.ownprice').val($(this).siblings('.baseprice').text());
});

Upvotes: 1

Views: 25

Answers (2)

Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

Iterate over each parent using .each() method, then get the value of children baseprice and add it to .ownprice.

$('#copybtn').click(function() {
    $(".baseownwrap").each( function(){
        bestPriceValue = $('.baseprice', this).text();
        $('.ownprice', this).val(bestPriceValue);
    });
});

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

You can iterate through each element with class .ownprice and copy the value from the element with class .baseprice:

$('#copybtn').click(function() {
  $(".ownprice").each(function() {
    $(this).val(parseInt($(this).prev().text(), 10));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="copybtn" class="btn">Copy</button>

<p class="baseownwrap">
  <label>thing1</label>
  <span class="baseprice">1</span>
  <input class="ownprice" type="text" value="" name="price[]">
</p>

<p class="baseownwrap">
  <label>thing2</label>
  <span class="baseprice">2</span>
  <input class="ownprice" type="text" value="" name="price[]">
</p>

References:

.prev()

.each()

Upvotes: 1

Related Questions