javascript - 在 jquery 中动态添加内容问题

Question

我通过单击按钮将其附加到 div 来添加块内容。问题是，它正在按钮下方添加内容Add Section。它应该在Add Section按钮上方添加内容，即注释的位置。我的代码如下：

有人可以帮忙吗？我希望div class="g"每次单击Add Section按钮时都将内容添加到上方。

<div class="a">
    <div class="b">
        <div class="c">
            <input type="text" id="user-title-1" class="d" value="user 1">
            <button class="mdl-button mdl-js-button edit-title-btn">
            </button>
        </div>

                <div class="e">
                    <ul>  
                            for (int j = 1; j <= numOfCheckboxes; j++)
                            {
                                <li>
                                    <input type="checkbox" id="user-@j-1">
                                    <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                                </li>
                            }
                        }
                    </ul>

                <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>

        <!-- New section to be added here
            //
        -->

            <div class="g">
                <button type="button" class="mdl-button add-Section-btn js-add-Section">
                    AddSection
                </button> &nbsp; &nbsp;
                <button type="button" class="mdl-button secondary-btn js-save">
                    Save
                </button>
            </div>

    </div>
</div>  


<script>

    $(document.body).on('click', 'button.js-add-Section', function () {
                var content = `<div class="e">
                    <ul>  
                            for (int j = 1; j <= numOfCheckboxes; j++)
                            {
                                <li>
                                    <input type="checkbox" id="user-@j-1">
                                    <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                                </li>
                            }
                        }
                    </ul>
                    <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>`

            $(this).closest('.b').append(content);
    });

</script>

标签： javascriptjquery

Answer 1

只需将append()功能更改为insertBefore()

这是一个工作示例

$(document.body).on('click', 'button.js-add-Section', function() {
  var content = `<div class="e">
                    <ul>
                      <li>
                        <input type="checkbox" id="user-@j-1">
                        <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                      </li>
                    </ul>
                    <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>`;

  $(content).insertBefore($(this).closest('.g'));
});

$(document.body).on('click', 'button.js-show-supplier', function() {
  alert('Clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b">
    <div class="c">
      <input type="text" id="user-title-1" class="d" value="user 1">
      <button class="mdl-button mdl-js-button edit-title-btn">
            </button>
    </div>

    <div class="e">
      <ul>
        <li>
          <input type="checkbox" id="user-@j-1">
          <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
        </li>
      </ul>

      <div class="f">
        <small class="_availability">
          <span class="title"> Section 1 </span>
        </small>

        <button type="button" class="mdl-button btn-show js-show-supplier">
          <span class="show">Show <i class="icon-show"></i></span>
        </button>
      </div>
    </div>

    <div class="g">
      <button type="button" class="mdl-button add-Section-btn js-add-Section">
         AddSection
      </button> &nbsp; &nbsp;
      <button type="button" class="mdl-button secondary-btn js-save">
        Save
      </button>
    </div>
  </div>
</div>

编辑

你的意思是这样的吗？

$(".main").on('change', '.js-cars-itemas [type="checkbox"]', function() {
  var idx = $(this).closest('li').index(); //Get the index - Number in order
  var chk = $(this).is(":checked"); //Get if checked or not
  var obj = this; //Checkbox object

  $(this).closest('.cars').find('.js-cars-itemas').each(function() { //Loop every js-cars-item
    //Find the checkbox with the same index of clicked checkbox. Change disabled property
    $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
  });

  var checkeds = [];
  $(this).closest(".cars").find(".cars-itemas input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
})

$('.js-add-category').click(function() {

  var categoryContent = `<div class="cars">

<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-3">
      <label for="car-1-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-3">
      <label for="car-2-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-3">
      <label for="car-3-3"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>

<button type="button" class="js-add-section">Add Section</button>
<button type="button" class="js-save-section">Save</button>
</div> <br>`

  $('.main').append(categoryContent);

});


$(document.body).on('click', 'button.js-add-section', function() {
  var sectionContent = `<div class="cars-item js-cars-itemas">
  <ul>
    <li>
      <input type="checkbox" id="car-1-6>
      <label for="car-1-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-2-6>
      <label for="car-2-6"><i class="icon-tick"></i></label>
    </li>
      <li>
      <input type="checkbox" id="car-3-6>
      <label for="car-3-6"><i class="icon-tick"></i></label>
    </li>
  </ul> </div>`


	
  $(this).closest('.cars').append(sectionContent);

});

$(document.body).on('click', 'button.js-save-section', function() {
	var parent = $(this).closest(".cars").addClass("saved");
  setTimeout(function() {
    parent.removeClass("saved");
  }, 2E3);
});

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
  transition: border-color 300ms ease-in-out;
}

.cars.saved {
  border-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="js-add-category">Add Category</button> <br> <br>

<div class="main">

  <div class="cars">

    <div class="cars-item js-cars-item">
      <ul>
        <li>
          <input type="checkbox" id="car-1-3">
          <label for="car-1-3"><i class="icon-tick"></i></label>
        </li>
        <li>
          <input type="checkbox" id="car-2-3">
          <label for="car-2-3"><i class="icon-tick"></i></label>
        </li>
        <li>
          <input type="checkbox" id="car-3-3">
          <label for="car-3-3"><i class="icon-tick"></i></label>
        </li>
      </ul>
    </div>

    <button type="button" class="js-add-section">Add Section</button>
    <button type="button" class="js-save-section">Save</button>
    <br>

    <div class="section">
    </div>
  </div>
  <br>