jQuery儿童的子元素

Question

$(parentQuestion.children('.choice_class:last'));
<div class='parentquestion'> .....
<div class="choice_class">
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12"><span class="choice-no">Option 1</span><span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" required="required" class="form-control col-md-7 col-xs-12">
                </div>
                <a href="javascript: void(0);" onclick="addOption(this)" class="btn btn-danger"><span class="glyphicon glyphicon-plus"></span>Add Choice</a>
            </div>
        </div>

inside addOption function, using the this variable, I found the parent object and added another option below the last .choice_class.

I need to change the Option 1 to Option 2 when the second option is added.

The complete function is

function addOption(that) {
      $(that).parent().parent().after($('.choice_class_sample .choice_class').clone());

      var parentQuestion = $(that).parent().parent().parent();
      var lastChoice = parentQuestion.children('.choice_class:last');

      $(parentQuestion.children('.choice_class:last-child .choice-no')).html(parentQuestion.children('.choice_class').length);
      $(that).remove();
  }

But I am not able to select further more after selecting the children.

Answer 1

I could modify your code to "make it work", but the way you're going about this is a little bit unorthodox – namely, using clone to copy the existing element before duplicating it.

If you're going to be representing a JavaScript data structure (like an array) in DOM, and wanting to keep them in sync, it'd be much better to use a templating system. Since you're using jQuery, the jQuery Template plugin seems decent. From skimming the README, it would make your stuff as simple as this:

<script type="text/html" id="template">
  <div>
    <div>
      <label>
        <span>Option <span data-content="id"></span></span>
        <span class="required">*</span>
      </label>

      <div>
        <input type="text" required="required">
      </div>

      <a href="#" class="add-choice-button"><span class="glyphicon glyphicon-plus"></span> Add Choice</a>
    </div>
  </div>
</script>

Then, in your JavaScript, you'd have something like:

var options = [ { id: 1 } ]

parentQuestion.loadTemplate("#template", questions)

$('.add-choice-button').on('click', function () {
  options.push({
    id: options.length + 1  
  })

  parentQuestion.loadTemplate('#template', options)
})

Much, much cleaner. And best of all, it avoids having ugly, imperative DOM manipulation in your JS.