JQuery get img src und verwenden Sie es in einem als Datenattribut

Question

Ich versuche, eine Javascript-Bibliothek verwenden, die eine bestimmte HTML-Struktur erfordert, aber leider bin ich nicht erlaubt, es zu ändern.
Die Struktur kommt von einer Vorlage und ich muss mit dem arbeiten, was ich habe.
Der Punkt ist, dass ich versuche, src jedes Bildes zu kopieren und es als data-larysrc = "image/source/here" einzufügen.
Irgendwelche Ahnung, wie ich das tun könnte? Ich habe dies bisher aber es funktioniert nicht wie beabsichtigt:

$(document).ready(function() { 
    $("a").attr('data-largesrc', "'" + $("a").children().attr('src')) + "'"); 
}); 

Und die HTML-Struktur ist wie folgt:

<div class="container"> 
    <div id="products" class="productsList main"> 
     <ul id="og-grid" class="list og-grid"> 
      <li class="l1 i1 column1"> 
       <a href="?17,barracuda-email-security-gateway" tabindex="-1"> 
        <img src="files/150/BARRACUDAESG.jpg.png" alt="BARRACUDAESG.jpg.png"> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

Ich bin sicher, dass dies recht einfach gelöst werden soll, aber ich kann nicht scheinen, eine Lösung finden. Vielen Dank, wenn Sie mir helfen können!

Answer 1

Probieren Sie es

$(document).ready(function() { 
    $.each($("a"), function(i, k){ 
    $(this).data("largesrc", $(this).find("img").attr("src")); 
    }); 
}); 

Answer 2

Die children() Methode alle direkten Kinder eines Elternelements zurückgibt. Mit anderen Worten, es wird ein Array zurückgegeben. Was Sie suchen, ist ein einzelnes Objekt.

Anyways, wäre es am besten, die data() Funktion verwenden, anstatt

function getImageSource() { 
 
    var imgSrc = $("img").first().prop("src"); 
 
    $("img").data("largesrc", imgSrc); 
 
    var data = $("img").data("largesrc"); 
 
    $("#img-data-value").html(data); 
 
} 
 

 
$("button").on("click", getImageSource);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="products" class="productsList main"> 
 
     <ul id="og-grid" class="list og-grid"> 
 
      <li class="l1 i1 column1"> 
 
       <a href="?17,barracuda-email-security-gateway" tabindex="-1"> 
 
        <img src="files/150/BARRACUDAESG.jpg.png" alt="BARRACUDAESG.jpg.png"> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<button>Get Image Source</button> 
 
<p id="img-data-value"></p>

Answer 3

Zunächst einmal müssen Sie nicht die zusätzlichen Anführungszeichen müssen. Zweitens sollten Sie .first() anstelle von .children() verwenden, da .children() ein Array zurückgibt, während .first() das erste untergeordnete Element zurückgibt (und Ihres nur ein untergeordnetes Element hat).

$(document).ready(function() { 
     $("a").data('largesrc', $("a").first().attr('src'))); 
    });