Find and replace in a block of code with jQuery?

Question

I have this HTML:

<div class="group-sizing">
    <div class="form-group">
        <div>
            <h3>Guest <span>1</span> Welcome</h3>
            <div>
                <select id="level1"></select>
            </div>
        </div>
    </div>
</div>

I have this function:

var guestBlock = $(".group-sizing").html();
$("#guestNum").change(function(){
    var count = $(this).val();
    $(".group-sizing .form-group:gt("+(count-1)+")").remove();
    for (var i = $(".group-sizing .form-group").length; i < count; i++){
        $(guestBlock).find(?????????).html(i); //find and change span and id of select
        $(".group-sizing").append(guestBlock); //then print the block
    };
});

In $(guestBlock).find() I want to find the span from the <h3> and the id from the <select>. Then increment them by i but so far I haven't been able to get it. It always prints with 1 in those spaces.

Let me be an ass here, ????????? is not a valid selector -- so what selectors have you tried? — Brandon Buck
– Brandon Buck, Commented Mar 22, 2016 at 3:49
<select id="guestNum"> is a select earlier in the HTML. That calls the change function. — o_O
– o_O, Commented Mar 22, 2016 at 3:55
Output expected is the entire block but with <h3>Guest <span>2</span> Welcome</h3> and <select id="level2"> and so on according to the for statement. — o_O
– o_O, Commented Mar 22, 2016 at 3:56

Arun P Johny · Accepted Answer · 2016-03-22 03:57:51Z

You can use cloning to solve it like

var $guestBlock = $(".group-sizing > .form-group").first().clone();
$("#guestNum").change(function() {
  var count = $(this).val();
  var $groups = $(".group-sizing > .form-group");
  $groups.slice(count).remove();
  for (var i = $groups.length; i < count; i++) {
    var $clone = $guestBlock.clone().appendTo('.group-sizing');
    $clone.find('h3 span').text(i + 1);
    $clone.find('select').attr('id', 'level' + (i + 1));
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group-sizing">
  <div class="form-group">
    <div>
      <h3>Guest <span>1</span> Welcome</h3>
      <div>
        <select id="level1"></select>
      </div>
    </div>
  </div>
</div>


<select id="guestNum">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Collectives™ on Stack Overflow

Find and replace in a block of code with jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related