jQueryのクローン複数.find（）関数

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

以下のように動作します.clone（）部分の後には、さらに機能を追加することはできません。これらの機能は、クローンが作成された後に呼び出される必要があります。

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>