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

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？

- Paul

Answer 1

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

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

否则，分别针对所点击的列表项：

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

- VisioN

Answer 2

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

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

- Anoop

Answer 3

请问为什么您要使用$("#myDiv").find("li")，而不是直接使用$("#myDiv li")呢？这样做就足够了：

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

个人而言，我更喜欢使用ID拆分来获取user_id（.attr('id').split('_')[1]），但是考虑到如果您需要更改前缀或命名约定，则无论如何都必须修改代码，因此我认为这并不重要。如果您需要一次解析大量内容，则可能会影响性能（因为拆分似乎一直比substr快，尽管我记不清原因了），但是对于逐个操作，substr应该可以正常工作。

- Jason M. Batchelor