Suche alle Bilder von Klassennamen und der Rückkehr src-Attribut

Ich versuche, alle Bilder mit class front und zeigen Sie Ihre src-Attribut. Suchen Sie in der Konsole funktioniert es, aber es gibt Bilder mit Klasse vor und auch Bilder mit Klasse wieder zusammen mit dem gesamten img-code. Ich will nur das src-Attribut. Wie kann ich o-Sie über das tun dies?

HTML

<div id="results"></div>

<div id="mm_grid">
   <!-- Grid contents written dynamically -->
   <div class="mm_row">
      <div class="mm_window" id="tile0" onclick="flipImage(this)"><img class="front" src="public/images/mm_image5.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile1" onclick="flipImage(this)"><img class="front" src="public/images/mm_image5.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
   <div class="mm_row">
      <div class="mm_window" id="tile2" onclick="flipImage(this)"><img class="front" src="public/images/mm_image8.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile3" onclick="flipImage(this)"><img class="front" src="public/images/mm_image0.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
   <div class="mm_row">
      <div class="mm_window" id="tile4" onclick="flipImage(this)"><img class="front" src="public/images/mm_image3.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile5" onclick="flipImage(this)"><img class="front" src="public/images/mm_image2.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
</div>​

jQuery

var linkArray = $("img.front").map(function() {
    return $(this).parent().html();
}).get();


console.log(linkArray);

Ergebnisse

["<img class="front" src="public/images/mm_image5.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image5.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image8.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image0.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image3.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image2.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">"]

InformationsquelleAutor Mr. 1.0 | 2012-04-11

  1. 3

    Ersetzen

    return $(this).parent().html();

    Mit

    return $(this).attr('src');

    In Ihrem Beispiel, Sie bekommen den HTML-code des Bildes das parent-element (z.B. div-element). Auf diese Weise erhalten Sie die src Attribut des front img-element allein.

    InformationsquelleAutor iMoses

  2. 1
    var $imgs = $('img.front'),
    arr = [];

$imgs.each(function () {
    arr.push($(this).attr('src'));
});

console.log(arr.join(', '));

    InformationsquelleAutor elclanrs

  3. 0
    var linkArray = $("img.front").map(function() {
    return this.src;
}).get();

    nicht übergeben zu müssen, über die jQuery-Funktion in map()

    InformationsquelleAutor fcalderan

  4. 0

    wenn Sie das SRC-Attribut nur, müssen Sie Folgendes tun:

    $("img.front").each(function (index, element){
   alert($("img.front").eq(index).attr("src"));
});

    dies wird drucken Sie die SRC-jedes Bild mit VORDER-Klasse.

    Mit dem index-parameter auf, ist irgendwie eine Verschwendung von code. Man könnte einfach schreiben alert($(this).attr("src")); die würde nicht Fragen, jQuery, zurück zu gehen und finden Sie alle Elemente passend zu Ihrem selector, nur wählen Sie ein einzelnes element, das schon war, der an die callback-Funktion.
    Vielen Dank für dein Kommentar 🙂

    InformationsquelleAutor Alaa Badran

Schreibe einen Kommentar