使用JQuery在嵌套Div中選擇元素

Question

我在Div中命名爲item的內部存在以下html標記，我想選擇所有元素（在嵌套div內）並清除值。如下面給出的Jquery所示，我設法使用.children().each()來訪問每個Div中的元素。但問題是.children().each()從父div一次下降一級，所以我已經重複相同的代碼塊與多個.children()來訪問嵌套Div內的元素，任何人都可以建議我一種方法來做到這一點，而無需重複代碼爲N個嵌套div。

HTML標記

<div class="item"> 
    <input type="hidden" value="1234" name="testVal"> 

    <div class="form-group" id="c1"> 
     <div class="controls "> 
      <input type="text" value="Results" name="s1" maxlength="255" id="id2"> 
     </div> 
    </div> 
    <div class="form-group" id="id4"> 
     <input type="text" value="Results" name="s12" maxlength="255" id="id225"> 

     <div class="form-group" id="id41"> 
      <input type="text" value="Results" name="s12" maxlength="255" id="5"> 

      <div class="form-group" id="id42"> 
       <input type="text" value="Results" name="s12" maxlength="255" id="5"> 

       <div class="form-group" id="id43"> 
        <input type="text" value="Results" name="s12" maxlength="255" id="id224"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我Qjuery腳本

var row = $(".item:first").clone(false).get(0); 
$(row).children().each(function() { 
updateElementIndex(this, prefix, formCount); 

if ($(this).attr('type') == 'text') { 
    $(this).val(''); 
} 
if ($(this).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) { 
    $(this).val(''); 
} 
if ($(this).attr('type') == 'file') { 
    $(this).val(''); 
} 
if ($(this).attr('type') == 'checkbox') { 
    $(this).attr('checked', false); 
} 
$(this).remove('a'); 
}); 

// Relabel or rename all the relevant bits 
$(row).children().children().each(function() { 
updateElementIndex(this, prefix, formCount) 

if ($(this).attr('type') == 'text') { 
    $(this).val(''); 
} 
if ($(this).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) { 
    $(this).val(''); 
} 
if ($(this).attr('type') == 'file') { 
    $(this).val(''); 
} 
if ($(this).attr('type') == 'checkbox') { 
    $(this).attr('checked', false); 
} 
$(this).remove('a'); 
}); 

Answer 1

嘗試

var row = $(".item:first").clone(false).get(0); 
$(row).find('input:not(:checkbox)').val(''); 
$(row).find('input:checkbox').prop('checked', false); 

Answer 2

$(".item :input:not([name=csrfmiddlewaretoken])").val(''); 
$(".item :checkbox").prop("checked", false); 
$(".item a").remove(); 

Answer 3

您可以使用find而不是兒童，它將沿着dom遍歷。

$(row).find('input').each(function() { 

Answer 4

看起來像這樣的事情會做的伎倆。您當然要更具體地說明您選擇哪個項目。

$('.item').find('input').val(''); 

Answer 5

試試這個

var row = $(".item:first").clone(false).get(0); 
    $(row).children().each(function() { 
     var $this=$(this); 
     clearelements($this); 
     if(element.children().length > 0) 
      { 
      element.children().each(function(){ 
       recursive(this) 
      clearelements(this); 
      }); 
     } 
    }); 


    function recursive(element) 
    { 

    if(element.children().length > 0) 
    { 
     element.children().each(function(){ 
     clearelements(this); 
     }); 
    } 
} 

     function clearelements(obj){ 
     if ($(obj).attr('type') == 'text') { 
      $(obj).val(''); 
      } 
     if ($(obj).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) { 
      $(obj).val(''); 
      } 
      if ($(obj).attr('type') == 'file') { 
      $(obj).val(''); 
      } 
      if ($(obj).attr('type') == 'checkbox') { 
      $(obj).attr('checked', false); 
      } 
      $(obj).remove('a'); 
     } 

或者乾脆你可以在同一時間訪問他們所有

$(".item :input:not([name=csrfmiddlewaretoken]).val(''); 
    $(".item :checkbox).prop('checked', false); 
    $(".item a").remove();