如何在内部获取img src <li><div> 标签？

Question

我正在尝试从选定的列表项中获取图像的src。 HTML看起来像这样：

<li id="player_7">
  <div class="nailthumb-container square-thumb">
    <img src="../photos/files/7/thumb/6c0f1676cdcb1a9a5215db3e12572450.jpeg" />
  </div>
</li>

我现在可以从所选列表元素中获取玩家ID，如下所示：

jQuery的

$('#myDiv').find("li").click(function() {
    var user_id = $(this).attr('id').substr(7);
});

如何从选定的列表元素中获取img src？

Answer 1

如果user_id对应于玩家ID中的数字，请尝试：

var src = $("#player_" + user_id + " img").prop("src");

否则，分别对于单击的列表项：

$("#myDiv").find("li").click(function() {
    var src = $("img", this).prop("src");
});

Answer 2

使用jQuery获取图像元素，然后读取其src属性。

$('#myDiv').find("li").click(function() {
    var user_id = $(this).attr('id').substr(7);
   var src = $("img", this)[0].src;
});

Answer 3

我可以问你为什么要做$("#myDiv").find("li")当"$("#myDiv li")做得很好时， $("#myDiv").find("li")然后，在这一点上，以下就足够了：

$('#myDiv li").click(function() {
    var user_id = $(this).attr('id').substr(7);
    var src = $("img",this).attr('src');
    // ...
});

就个人而言，我倾向于在ID上使用split来获取user_id，（。 .attr('id').split('_')[1] ），但看到你必须修改你的代码如果你需要改变你的前缀或命名约定，我认为这并不重要。 它可能会影响性能（因为拆分似乎总是更快，虽然我不记得为什么），如果你有很多这些要一次解析，但除此之外，对于一对一的操作，substr应该工作正好。