Jquery - Erhalten Attributwert der nächsten Klasse

Ich versuche, den Attributwert aus dem nächsten Element mit der angegebenen Klasse zu greifen, aber immer wieder undefined zurück.Jquery - Erhalten Attributwert der nächsten Klasse

Unten ist mein HTML und mein Code, ich bin mir nicht sicher, was falsch läuft, um undefined zurück zu kommen.

HTML

<body> 
    <form action="/update" id="formwrite"> 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title va-middle">Account Settings 
         <img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne"> 
         </h4> 
     </div> 
     <div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-default"> 
      <div class="row fieldpos"> 
       <fieldset class="form-group textwide"> 
       <label for="email">Email</label> 
       <input type="email" class="form-control" id="email" placeholder="Enter Email" required> 
       </fieldset> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="panel"> 
     <div class="panel-heading" role="tab" id="headingTwo"> 
      <h4 class="panel-title va-middle">Other Settings 
           <img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo"> 
           </h4> 
     </div> 
     <div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-default"> 
      <div class="row fieldpos"> 
       <fieldset class="form-group textwide"> 
       <label for="group">Test</label> 
       <input type="text" class="form-control " id="group" placeholder="test" required> 
       </fieldset> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-success form-control savechanges">Save Changes</button> 
    <button class="btn btn-success form-control test">Call Function</button> 
    </form> 
</body>

$(document).on("click", ".test", function(){ 
    $("input[required]").each(function(){ 
    var inputval = $(this).val(); 
    var collaspe = $(this).closest(".collapse-icon").attr("aria-expanded"); 
    console.log(collaspe); 
     if(!inputval){ 
      console.log("Required Empty"); 
      $(".collapse-icon").trigger("click"); 
     } else { 
      console.log("Required has value");; 
     } 
    }); 
    });

Irgendwelche Vorschläge?

EDIT: JSFiddle

Quelle

2016-09-26 Studento919

wo ist dein HTML? –

am nächsten verläuft das DOM (über Eltern), aber Ihre Eingabeelemente haben keine übergeordnete Elemente mit der Klasse "Kollaps-Symbol" - diese scheinen in Geschwister der Eltern zu sein. Sie müssen wahrscheinlich zum übergeordneten "Kollaps" gehen, dann zu seinem vorherigen Geschwister und dann von dort zum Kollaps-Symbol. –

Kurzer Hinweis zu Ihrem HTML: Ihr zweites Kollapsepanel ist nicht Teil der '.panel-group [role = 'tablist']' was bedeutet, dass das zweite Panel gleichzeitig mit dem ersten Panel geöffnet werden kann. Wenn das die Absicht ist, dann ist mein Kommentar sinnlos; Wenn Sie jedoch eine Akkordeon-Panel-Gruppe wollen, dann muss das zweite Panel geschachtelt werden :) – Bwolfing

$.closest das DOM Suche nur Vorfahren durchqueren auf, es wird nicht für das "wörtliche" nächste Element suchen. Ihre .collapse-icon scheinen nicht direkte Eltern zu sein, sondern eher Kinder der .panel-heading Elemente (die Eltern sind). Also wäre die Lösung $(this).closest('.panel-heading').find('.collapse-icon')

UPDATE: Ich entschuldige mich, in meiner Antwort falsch. Es sollte .closest('.panel').find('.panel-heading .collapse-icon') sein, da .panel-heading ein Geschwister des übergeordneten Elements oder des Eingangs ist. Sie brauchen also die .panel-body Eltern und dann finden Sie es Überschrift Kollaps-Symbol.

Quelle

2016-09-26 15:34:19 Bwolfing

Noch immer undefiniert wie hier zu sehen: [JSFiddle] (https://jsfiddle.net/ycfpe5zd/2/) – Studento919

Zusätzlich würde ich vorschlagen das $ (". collapse-icon").Trigger ("click") in der JS müsste aktualisiert werden, da dies alle Elemente mit dieser Klasse auslösen wird. –

Mein schlechtes Ich habe die Panels innerhalb der Panels entfernt und es funktioniert jetzt! – Studento919

Wie bereits erläutert am nächsten suchen nur in direkten Vorfahren.

Hier ist eine Arbeits Geige - https://jsfiddle.net/z5wbxzzo/2/

$(document).on("click", ".test", function(){ 
    $("input[required]").each(function(){ 
    var inputval = $(this).val(); 
    var collaspe = $(this).closest(".panel-collapse").siblings(".panel-heading").find(".collapse-icon").attr("aria-expanded"); 
    console.log(inputval, collaspe); 
     if(!inputval){ 
      console.log("Required Empty"); 
      $(".collapse-icon").trigger("click"); 
     } else { 
      console.log("Required has value");; 
     } 
    }); 
    });

Hoffnung dieses

Quelle

2016-09-26 15:45:07

Das Problem mit dieser Antwort ist '$ .find()' kann ein falsches Element finden. Zum Beispiel, wenn Sie auf das zweite Element klicken und es auf die Panel-Gruppe durchläuft, kann '$ .find (". Collapse-icon ")' das erste Kollaps-Icon finden und nicht das zweite. – Bwolfing

Bitte aktualisiert haben. Lassen Sie mich wissen, ob das für Sie funktioniert. –

Macht Sinn! Angenommen, es gibt nicht mehrere Panel-Überschriften Geschwister (die auf der gegebenen HTML gibt es nicht) – Bwolfing

am nächsten() gibt die ersten Vorfahren den angegebenen Selektor passenden hilft.

.collapse-Symbol ist nicht ein Vorfahre von Eingang [erforderlich]

Wie ich denke, es gibt mehr als ein .panel Element in einer .panel-Gruppe ist, müssen Sie zuerst das obere .panel Element identifizieren (durch eine ID oder einen bestimmten Klassennamen oder was auch immer) nächsten Tauchgang in das .collapse-Symbol

hTML-Code

<div class="panel panel-container"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title va-middle">Account Settings 
      <img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne"> 
     </h4> 
    </div> 

    ...

js Code

$(this).closest('.panel-container').find('.collapse-icon')

finden

Quelle

2016-09-26 15:49:50 OBDM

Jquery - Erhalten Attributwert der nächsten Klasse

Antwort

Verwandte Themen