Wählen Sie die Elemente in verschachtelten Divs mit JQuery

Ich habe Folgendes html-markup innerhalb eines Div-namens item und ich möchten, wählen Sie alle Elemente (innen verschachtelte divs) und löschen der Werte. Wie gezeigt in der folgenden gegebenen Jquery ich habe es geschafft, Zugriff auf Elemente in die einzelnen Div-mithilfe.children().each(). Aber das problem ist .children().each()geht eine Ebene in einer Zeit, von der parent-div, so habe ich wiederholt die gleiche code-block mit mehreren .children() Zugriff auf die Elemente in verschachtelten Divs, kann mir jemand empfehlen eine Methode, um dies zu tun, ohne zu wiederholen, den code für N-Anzahl von verschachtelten divs .

html-markup

<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>

Meine Qjuery Skript

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');
});

InformationsquelleAutor PIKP | 2013-11-04

1

Scheint so etwas wie dieses, würde den trick tun. Sie natürlich genauere Angaben, welches Objekt Sie auswählen.
```
$('.item').find('input').val('');
```
InformationsquelleAutor Keeley Carrigan

Versuchen

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

InformationsquelleAutor Tushar Gupta - curioustushar

0

Können Sie verwenden, finden Sie anstelle der Kinder und durchziehen den ganzen Weg nach unten den dom.
```
$(row).find('input').each(function () {
```
InformationsquelleAutor spacebean

Versuchen, diese

 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');
         }

oder man kann einfach auf Sie zugreifen, zu einer Zeit,

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

hi @SoftwareNerd Dank für deine Lösung. Sie haben eine Funktion namens recursive aber haben Sie nicht genannt, die Funktion und die Sie verwendet haben if(element.children().length > 0) in der 5. Zeile den angegebenen code aus, und ich Frage mich, Woher es kam-Formular. seine schön, wenn du mir eine Erklärung
aktualisiert meine Antwort ..

InformationsquelleAutor SoftwareNerd

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

InformationsquelleAutor Barmar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.