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事物类的数据网址？

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

您可以使用map()和get()方法获取网址数组。

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 3

ES6 one-liner：

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 one-liner：

$('#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 4

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

或者在jQuery 1.4.3或更高版本中：

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

Answer 5

您可以使用id siteTable获取div的子节点，然后为每个子节点获取data-url属性。

JQuery / Javascript，如何通过多个“相同”的div获取data-url？

5 个答案: