class über diverse For-Schleifen und if-Bedingungen ansprechen

[AAndreasKö]

Hallo zusammen,

ich bin in der JS-Welt noch recht frisch und unbeholfen und komme bei einem Problem einfach irgendwie nicht weiter, was mit ziemlicher Sicherheit an einer Wissenslücke meinerseits liegt. Da ich mir entsprechende Kenntnisse gerade noch erarbeite und wer weiß wie weit von der Lösung entfernt bin, bin ich etwas frustriert. Es wäre schön, wenn mir jemand weiterhelfen könnte...

Nun zum eigentlichen Problem...es handelt sich um folgenden Code:

<div id="DMW">
        <div id="DD">
            <button id="Index" class="accordion" onclick="ShowSlides(undefined,'A1');return false">Digitale Dienstleistungen</button>
                <div class="panel">
                    <div class="slideshow-container">
               
                        <div class="mySlides fade DMW_A1" style="display: none;height:400px;overflow-y: auto;">
                            <div class="text">Januar</div>
                            <div class="text1"></div>
                        </div>
                           
                        <div class="mySlides fade DMW_A1" style="display: none;height:400px;overflow-y: auto;">
                            <div class="text">Februar</div>
                            <div class="text1"></div>

Dieser wiederholt sich ungefähr 10 (Segmente) mal. Mit einer Funktion möchte ich die einzelnen Segmente ansprechen. Also erst id="DD" (Segment) auswählen, dann die class="accordion" mit dem HTML-Inhalt "Digitale Dienstleistungen" finden und mit einem Listeneintrag (var schwerpunktList) vergleichen, bei Übereinstimmung dann die class="text" mit dem HTML-Inhalt "Januar" finden und mit einem Listeneintrag (var monatList) vergleichen und letztendlich bei Übereinstimmung von diesen Werten in die class="text1" einen Text einfügen. Dazu habe ich die folgende Funktion geschrieben:

function onQuerySucceeded(sender, args) {

   var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    var group = document.getElementById("DD");
    var akkordion = group.getElementsByClassName("accordion");
    var akkordionTest = document.getElementsByClassName("accordion");
   
   
    while (listItemEnumerator.moveNext()) {   
        for (i = 0; i < akkordion.length; i++){                                   
            var oListItem = listItemEnumerator.get_current();
            var schwerpunktList = oListItem.get_item('Schwerpunkt');
           
            if (schwerpunktList == akkordion(i).innerHTML){                        //Wenn Schwerpunkt aus Liste dem Schwerpunkt des Akkordions entspricht
                var monat = group.getElementsByClassName("text");
               
                for (j = 0; j < monat.length; j++){                                //Liest alle Monate des Akkordions ein
                    var monatList = oListItem.get_item('Monat');
                   
                    if(monatList == monat(j).innerHTML){                        //Wenn Monat aus Liste dem Monat des Akkordions des Schwerpunkts entspricht
                        var auswertList = oListItem.get_item('Auswertung');   
                        var ausgabe = group.getElementsByClassName("text1")(j);
                        ausgabe.innerHTML = auswertList;                        //Schreibe in Textbereich des Akkordions-Monat
                    }
                }
            }
        }   
    }
}

Soweit läuft diese auch, allerdings bekomme ich die class="text" nicht sauber angesprochen. Die Funktion findet diese class, aber schreibt dann den Text in alle class (da diese ja auch mehrfach verwendet wird). Logisch betrachtet, müsste ich var ausgabe auf akkordion(i) beziehen. Also var ausgabe = akkordion(i).getElementsByClassName("text1")(j). Geht aber nicht. Ich weiß nicht, ob es einfach nur blöd gebaut ist von mir oder ob ich eine Kleinigkeit übersehen habe oder nicht weiß...Über eure Ideen oder Lösungsansätze würde ich mich sehr freuen.

Und wenn eure Ideen/Lösungsansätze ohne den Bezug auf die id="DD" auskommen würde, wäre es ideal...

Ich hoffe ich habe genug Details angegeben, um es euch verständlich darzulegen!?

Besten Dank schon mal vorab.

Viele Grüße

Andreas

 

[httpdigest]

Das Ergebnis von getElementsByClassName() ist eine HTMLCollection, auf der du auf das i-te Element entweder per Indexoperator elements[ i] oder per "item()" Funktion elements.item(i) zugreifen kannst.
Du machst aber folgendes: elements(i). Du behandelst die HTMLCollection elements also wie eine Funktion und rufst sie mit dem Argument 'i' auf. Das funktioniert nicht.

 

[AAndreasKö]

Hallo httpdigest,

danke für den Tip. Habe ich nun mal so umgesetzt/angepasst. Siehe anbei die Variable akkordionElement:

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';
   
    var listItemEnumerator = collListItem.getEnumerator();
   
    var j = 0;


    var group = document.getElementById("DMW");

    var akkordion = group.getElementsByClassName("accordion");
       
while (listItemEnumerator.moveNext()) {   
        for (i = 0; i < akkordion.length; i++){                               
                var oListItem = listItemEnumerator.get_current();
                var schwerpunktList = oListItem.get_item('Schwerpunkt');
                var akkordionElement = group.getElementsByClassName("accordion").item(i);
       
            if (schwerpunktList == akkordionElement.innerHTML){                   
                var monat = group.getElementsByClassName("text");
                   
                for (j = 0; j < monat.length; j++){                       
                var monatList = oListItem.get_item('Monat');
                var monatElement = group.getElementsByClassName("text").item(j);
                   
                    if(akkordionElement && monatList == monatElement.innerHTML){                       
                        alert(akkordionElement.innerHTML + " - " + monatElement.innerHTML);
                    var auswertList = oListItem.get_item('Auswertung');   
                    var ausgabe = group.getElementsByClassName("text1")(j);
                        ausgabe.innerHTML = auswertList;                       
                    }
                }
            }
        }
    }                               
}

Nun besteht aber weiterhin das Problem das ich die nächste Variable var monat gerne auf das var akkordionElement beziehen möchte. Sprich, ich möchte gerne auf die Text-Inhalte der var monat = group.getElementsByClassName("text") zugreifen, welche sich innerhalb des var akordionElement befinden.

Vielen Dank schon mal für deinen Denkanstoß!

 

[httpdigest]

Also, du holst dir ja mittels var akkordion = group.getElementsByClassName("accordion"); schon richtig die Liste der Elemente mit Klasse "accordion". In der Schleife über alle Akkordions und den inneren Schleifen dadrin verwendest du ja aber gar nicht das Akkordion-Element als Kontext für weiteren Abfragen, sondern immer nur "group".
Denke darüber nach, auf welchem (Kontext)-Element du jeweils getElementsByClassName aufruf musst.
var monat = group.getElementsByClassName("text"); ist z.B. falsch, weil du ja hier wieder alle text-Elemente in allen Akkordions in der ganzen Gruppe suchst.
Du solltest wohl eher: var monate = accordion.getElementsByClassName("text");. Vorher natürlich in der Schleife über alle Akkordions eine Variable var akkordionElement = akkordion.item(i); setzen. Tust du ja schon, nur unnötigerweise per group.getElementsByClassName("accordion").item(i)... Die Akkordion Elemente hast du ja schon in einer Variablen.

 

[AAndreasKö]

Was var monat anbelangt, ist dies genau das Problem. Rein logisch betrachtet würde ich die Variable var monat wie folgt belegen: var monat = akkordionElement.getElementsByClassName("text"). akkordionElement ist dabei wie bereits von dir erwähnt mit akkordion.item(i) befüllt, damit nur darin nach class "text" gesucht wird.
Geht aber scheinbar nicht. In der Konsole wird mir kein Fehler ausgewiesen. Aber der eingebaute alert meldet mir auch kein Durchkommen der Abfrage.

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';
   
    var listItemEnumerator = collListItem.getEnumerator();
   
    var j = 0;


    var group = document.getElementById("DMW");

    var akkordion = group.getElementsByClassName("accordion");
       
while (listItemEnumerator.moveNext()) {   
        for (i = 0; i < akkordion.length; i++){                               
                var oListItem = listItemEnumerator.get_current();
                var schwerpunktList = oListItem.get_item('Schwerpunkt');
                var akkordionElement = akkordion.item(i);
                //alert(akkordionElement.innerHTML);
               
            if (schwerpunktList == akkordionElement.innerHTML){                   
                var monat = akkordionElement.getElementsByClassName("text");
                for (j = 0; j < monat.length; j++){       
                    var monatElement = monat.item(j);
                    alert(monatElement);
                var monatList = oListItem.get_item('Monat');
               
                   
                    if(monatList == monatElement.innerHTML){                       
                    var auswertList = oListItem.get_item('Auswertung');   
                    var ausgabe = group.getElementsByClassName("text1")(j);
                        ausgabe.innerHTML = auswertList;                       
                    }
                }
            }
        }
    }                               
}

Irgendwo habe ich da, glaube ich, einen Denkfehler...

 

[AAndreasKö]

So,

hab es gelöst bekommen und jede Menge dabei gelernt. Abschließend hier das fertige Script:

function onQuerySucceeded(sender, args) {

    var akkordion = document.getElementsByClassName("accordion");
                var listItemInfo = '';
                var listItemEnumerator = collListItem.getEnumerator();
            while (listItemEnumerator.moveNext()) {   
   
        for (i = 0; i < akkordion.length; i++){
   
                var oListItem = listItemEnumerator.get_current();
                var schwerpunktList = oListItem.get_item('Schwerpunkt');
                var akkordionElement = akkordion.item(i);

            if (schwerpunktList == akkordionElement.innerHTML){   

                var monat = akkordionElement.nextElementSibling.firstElementChild.querySelectorAll(".text");

            for (j = 0; j < monat.length; j++){       
                var monatElement = monat[j];
                var monatList = oListItem.get_item('Monat');
               
                if(monatList == monatElement.innerHTML){                       
                    var auswertList = oListItem.get_item('Auswertung');   
                    var ausgabe = akkordionElement.nextElementSibling.firstElementChild.querySelectorAll(".text1");
                    var ausgabeElement = ausgabe[j];
                        ausgabeElement.innerHTML = auswertList;           
                    }
                }
            }
        }
   
    }   
}

Danke auf jeden Fall für deine Denkanstöße, httpdigest!