jQuery获取img src并在as数据属性中使用它

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

试试吧

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

Answer 2

children()方法返回父元素的所有直接子元素。 换句话说，它将返回一个数组。 您正在寻找的是单个对象。

无论如何，最好使用data()函数代替

 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

首先，您不需要多余的引号。 其次，您应该使用.first（）而不是.children（），因为.children（）将返回一个数组，而.first（）将返回第一个孩子（而您只有一个孩子）。

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