從單擊的li元素獲取所有圖像src？

Question

如何在單擊的li元素中獲取img元素的所有src屬性？

<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中的圖像單擊做出反應

如果您想要完全限定的URL，而不僅僅是src =“ image”中的字符串，請使用return $(this).prop("src")

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

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

在事件中使用$（this）來保存單擊的對象。 然后只搜索您要尋找的標簽。

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

Answer 3

您可以為此使用on（） ：

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

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

過濾圖像容器，並使用.push()將src添加到數組中，您可以根據需要在click函數內部或外部聲明img[]數組

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

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

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