JQuery/Javascript，我如何通過多個'same'div來獲取數據url？

Question

<div id="siteTable"> 
    <div class="thing id12" data-url="www.aaax.com"</div> 
    <div class="thing id23" data-url="www.bcbc.com"</div> 
    <div class="thing id34" data-url="www.eeed.com"</div> 
    <div class="thing id45" data-url="www.djhn.com"</div> 
    . 
    . 
    . 
    . 
    <div class="thing id92295" data-url="www.zzzzhn.com"</div> 
</div> 

我該如何去獲取siteTable下每個div類的數據url？

Answer 1

獲取所有具有使用has attribute selector屬性的元素，並使用each()方法對它們進行迭代。

$('#siteTable div[data-url]').each(function() { 
 
    console.log($(this).data('url')) 
 
    // or 
 
    // console.log(this.dataset.url) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="siteTable"> 
 
    <div class="thing id12" data-url="www.aaax.com"></div> 
 
    <div class="thing id23" data-url="www.bcbc.com"></div> 
 
    <div class="thing id34" data-url="www.eeed.com"></div> 
 
    <div class="thing id45" data-url="www.djhn.com"></div> 
 
    . . . . 
 
    <div class="thing id92295" data-url="www.zzzzhn.com"></div> 
 
</div>

Answer 2

你可以得到ID siteTable的div的childNodes，然後爲每個孩子得到data-url屬性。

Answer 3

您可以使用map()和get()方法獲取url數組。

var urls = $('#siteTable > div.thing').map(function() { 
 
    return $(this).data('url') 
 
}).get() 
 

 
console.log(urls)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="siteTable"> 
 
    <div class="thing id12" data-url="www.aaax.com"></div> 
 
    <div class="thing id23" data-url="www.bcbc.com"></div> 
 
    <div class="thing id34" data-url="www.eeed.com"></div> 
 
    <div class="thing id45" data-url="www.djhn.com"></div> 
 
    <div class="thing id92295" data-url="www.zzzzhn.com"></div> 
 
</div>

Answer 4

ES6單行：

Array.from(document.querySelectorAll('#siteTable > .thing')).map(div => div.getAttribute('data-url')) 

var urls = 
 
Array.from(document.querySelectorAll('#siteTable > .thing')).map(div => div.getAttribute('data-url')) 
 
console.log(urls)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="siteTable"> 
 
    <div class="thing id12" data-url="www.aaax.com"></div> 
 
    <div class="thing id23" data-url="www.bcbc.com"></div> 
 
    <div class="thing id34" data-url="www.eeed.com"></div> 
 
    <div class="thing id45" data-url="www.djhn.com"></div> 
 
    <div class="thing id92295" data-url="www.zzzzhn.com"></div> 
 
</div>

jQuery的單行：

$('#siteTable > .thing').map(function() {return $(this).attr('data-url')}).get() 

var urls = 
 
$('#siteTable > .thing').map(function() {return $(this).attr('data-url')}).get() 
 
console.log(urls)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="siteTable"> 
 
    <div class="thing id12" data-url="www.aaax.com"></div> 
 
    <div class="thing id23" data-url="www.bcbc.com"></div> 
 
    <div class="thing id34" data-url="www.eeed.com"></div> 
 
    <div class="thing id45" data-url="www.djhn.com"></div> 
 
    <div class="thing id92295" data-url="www.zzzzhn.com"></div> 
 
</div>

Answer 5

$("#siteTable .thing").each(function() { 
    console.log($(this).attr("data-url"); 
}); 

還是在jQuery的1.4.3或更高版本：

$("#siteTable .thing").each(function() { 
    console.log($(this).data("url"); 
});