JQueryがimg srcを取得し、データ属性として使用する

Question

特定のHTML構造を必要とするjavascriptライブラリを使用しようとしていますが、残念ながら変更できません。
構造はテンプレートに由来しており、私は自分が持っているものと作業しなければなりません。
重要なのは、すべてのイメージのsrcをコピーして、それをdata-largesrc = "image/source/here"として配置しようとしていることです。
私はこれをどのように行うことができますか？私は今まで、これを持っていますが、それは意図したとおりに動作していないです：

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

そしてHTML構造は、このようなものです：

<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> 

私は、これはかなり簡単に解決されなければならないと確信しているが、私はできないようです解決策を見つける。あなたが私を助けることができれば大変ありがとう！

Answer 1

はchildren()方法は、親要素のすべて直接の子を返します

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

Answer 2

それを試してみてください。つまり、配列を返します。あなたが探しているものは、単一のオブジェクトです。

とにかく、それはすべての

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

まず代わりdata()機能を使用するのが最善だろう、あなたは余分な引用符は必要ありません。第2に、.children（）は配列を返し、.first（）は最初の子を返します（あなたの子は1つしかありません）ので、.children（）の代わりに.first（）を使用してください。

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