Question

我有下一个代码：

HTML：

<ul>
  <li id="clonedInput0">
    <label>
      <input type="file" accept="image/*" name="image_gallery[]" id="image_gallery"
      class="image_gallery" style="display:none;" data-gallery="0">
        <p>Select image</p>
      <div class="img_src"></div>
      <div class="overlay-image" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>
    </label>
  </li>
  <div id="add_more" class="add-more"><img src="<?php echo get_template_directory_uri()?>/images/guateworks/add_image.png" alt="" width="50" /></div>
</ul>

jQuery的：

var cloned = jQuery(".photos ul li:first-child").clone()
    .insertBefore(this)
    .attr("id", "clonedInput" +  cloneIndex)
    .find("#image_gallery").removeAttr('data-gallery').attr('data-gallery',cloneIndex)
    .find('.img_src').remove();

但是不起作用。谁知道为什么？

Answer 1

It would work as shown below,after the .clone() part you cannot add more functionalities,those have to be called after the clone has been created.

var cloneIndex=2;
var cloned = $(".photos ul li:first-child").clone();
console.log("clone "+cloned)
cloned.insertBefore($(".photos ul li:first-child")).attr("id", "clonedInput" +  cloneIndex).find("#image_gallery").removeAttr('data-gallery').attr('data-gallery',cloneIndex).find('.img_src').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="photos">
<ul>
<li id="clonedInput0">
<label>
<input type="file" accept="image/*" name="image_gallery[]" id="image_gallery"
class="image_gallery" style="display:none;" data-gallery="1">
<p>Select image</p>
<div class="img_src"></div>
<div class="overlay-image" style="display:none;">
<i class="fa fa-circle-o-notch fa-spin"></i>
</div>
</label>
</li>
<div id="add_more" class="add-more">
<img src="" alt="" width="50" />
</div>
</ul>
</div>

jQuery克隆多个.find（）函数

1 个答案: