Mithilfe Von Jquery .addClass auf html-Elemente in array

Habe ich ein paar html-image-tags, die ein array ausfüllen. Auf der Seite http://www.digitalbrent.com/lab - drei der Elemente in dem array angezeigt werden. Ich muss eine Klasse Hinzugefügt werden, um Sie nach einer Schaltfläche geklickt wird. Die Klasse ist für jeden anders, wenn die imgs angezeigt wird, aus dem array. Hier ist der code:

$(document).ready(function(){        //populates array with images

    var shipImgs = $("#thumb_slider").children();
    console.log(shipImgs);

    $.each(shipImgs,function(i,elem){
        var tag = "<img src='" + $(elem).attr('src') + "' alt='space'/>"; //This is how I made the image tags.
        imgArr.push(tag);
    });
    console.log(imgArr);

});

$("#basic_ul").html(imgArr[b] + imgArr[a] + imgArr[c]); //displays the images
        imgArr[b].addClass("left_slot");
        imgArr[a].addClass("middle_slot");
        imgArr[c].addClass("right_slot");

Ich habe auch versucht es mit dem Selektor, um die array-Elemente $(imgArr[b]).addClass("left_slot"); aber das hat nicht funktioniert entweder.

Jeder Rat würde sehr geschätzt werden. Ich habe nach ähnlichen Fragen hier auf stackoverflow, aber kein Glück. Ich habe seit Jahren dieses Projekt für eine Weile nun und kann nichts finden.

  • Sorry, möglicherweise müssen Sie drücken Sie die erhöhen-Taste, wenn Sie sind auf der Suche auf die Seite, um zu sehen, das array
InformationsquelleAutor Digital Brent | 2012-03-30
  1. 4

    Ihre imgArr enthält nur ein array von strings, der die image-tags " HTML.

    Statt, wenn Sie übergeben Sie die Zeichenfolge, um die jQuery-Funktion, die Sie erhalten eine in-memory-Knoten, die Sie dann zu einem Dokument hinzufügen.

    Versuchen Sie, Ihren code oben:

    $(document).ready(function(){        //populates array with images
    var $basicUl = $('#basic_ul'); //cache the selector
    var shipImgs = $("#thumb_slider").children().each(function(index, element) {
        var newImg = $("<img />").attr({src: this.src, alt: 'space'}).addClass(index == 0 ? "middle_slot" : (index == 1 ? "left_slot" : "right_slot"));
        $basicUl.append(newImg);
    });
});
    • Dank einer Tonne! Das funktioniert perfekt!
    • Ohne probs!!! Gibt es irgendeinen Aspekt meines Codes, die unklar ist? Verstehen Sie den wichtigen Unterschied zwischen einer HTML-string und eine tatsächliche DOM-element, insbesondere über jQuery? Lassen Sie mich wissen, wenn ich etwas klarer.
    InformationsquelleAutor GregL
  2. 1

    Sollten Sie mit Hilfe each() Durchlaufen jQuery-Sammlungen, und nicht $.each().

    shipImgs.each(function () {
    var img = "<img src='" + $(this).attr('src') + "' alt='space'/>";
    imgArr.push(img);
});
    InformationsquelleAutor elclanrs
  3. 1

    Sie versuchen, zu .addClass einen string - imgArr[b] ist eine Zeichenfolge, die nicht ein element, Sie können nicht hinzufügen-Klasse, um eine Zeichenfolge. Probieren Sie etwas wie dieses:

    $(document).ready(function(){        //populates array with images

    var shipImgs = $("#thumb_slider").children();
    console.log(shipImgs);

    $.each(shipImgs,function(i,elem){
        var tag = $("<img src='" + $(elem).attr('src') + "' alt='space'/>"); //This is how I made the image tags.
        imgArr.push(tag);
    });
    console.log(imgArr);

});

$("#basic_ul").append(imgArr[b]);
$("#basic_ul").append(imgArr[a]);
$("#basic_ul").append(imgArr[c]);
imgArr[b].addClass("left_slot");
imgArr[a].addClass("middle_slot");
imgArr[c].addClass("right_slot");
    InformationsquelleAutor Ilia Frenkel
Schreibe einen Kommentar