Question

如何在点击的src元素中获取img元素的所有li属性？

<ul id="container">
  <li>
    <br>
    <img src="src1"  />
    <img src="src2" style="display:none;" /> 
  </li>

$('#container li').bind("click", function(e) {

});

Answer 1

使用.on，.map和.get

建议不要使用已弃用的.bind

此代码将对点击LI中的任何内容作出反应。它可以修改为仅响应LI中图像的点击

如果您需要完全限定的网址而不仅仅是src =＆＃34;中的字符串＆＃34;

，请使用return $(this).prop("src")

＆＃13;

$('#container li').on("click", function(e) {
  console.log(
    $("img",this).map(function() { return this.src }).get()
  )
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container">
  <li><br><img src="src1" /><img src="src2" style="display:none;" /> </li>
  <li><br><img src="src3" /><img src="src4" style="display:none;" /> </li>
</ul>

＆＃13;

Answer 2

在事件中使用$（this）来获取被点击的对象。然后只需搜索您要查找的标签。

$('#container li').bind("click", function(e) {
    var sources = $(this).find("img").map(function() { 
        return this.src; 
    }).get();         
});

Answer 3

您可以使用on()：

script

script

Answer 4

您可以使用map()和get()

尝试以下操作

$('#container li').on('click', function(){
  var srcList =  $(this).find('img').map( (i,s) => $(s).attr('src')).get();
  console.log(srcList);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container">
  <li><br><img src="src1"  /><img src="src2" style="display:none;" /> </li>
  <li><br><img src="src3"  /><img src="src4" style="display:none;" /> </li>
</ul>

Answer 5

过滤容器中的图像并使用src将.push()添加到数组中，您可以根据需要在单击函数内部或外部声明img[]数组

＆＃13;

$("#container li").on('click', function() {
  let img = [];
  $(this).find("img").each(function() {
    img.push($(this).attr('src'));
  });

  console.log(img);
});

＆＃13;

ul {
  background-color: blue;
}

li {
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container">
  <li>
    <br>
    <img src="src1.jpg" />
    <img src="src2.jpg" />
  </li>
  <li>
    <br>
    <img src="src3.jpg" />
    <img src="src4.jpg" />
  </li>
  <li>
    <br>
    <img src="src5.jpg" />
    <img src="src6.jpg" />
  </li>
</ul>

＆＃13;

从点击的li元素中获取所有图像src？

5 个答案: