如何获取DIV元素的值，如何将其放入数组中并在以后使用。 JS / jQuery

Question

我想获取所有这些div的data-league值，并将它们放入数组中。

我要做什么：获取所有这些值，保存它们，然后遍历它们，然后在这些div上调用.click。

我不知道是否有更简单的方法可以做到这一点。

我猜它还必须遍历ID = 128的div，并找到数据联盟值，对吗？

老实说，我完全被困住了，因此任何帮助都将得到帮助。

谢谢。

额外信息：基本上，最终结果是，单击按钮后，所有这些“缩略图”都应在新标签页中打开。 所有选项卡都是不同的流。 （见图片）

Answer 1

在示例中，您提供了相同的ID（128）已被多次使用。 这是不允许的。 遍历id将不起作用。

这意味着您必须寻找另一种可能性。 可以使用某个类获取所有div元素，例如以下示例：

var divs = document.getElementsByClassName('videoPanel');

现在，您可以遍历此集合，提取属性data-league的值并将其保存在某个位置，例如在数组中：

var dataLeagueValues = [];
for (var i = 0; i < divs.length; i++) {
    dataLeagueValues.push(divs[i].getAttribute('data-league'));
}

现在，您已经在数组dataLeagueValues拥有所有值。 您可以在脚本中进一步使用它们。

Answer 2

您可以使用$('[attribute]')选择器选择具有data-league元素，然后可以使用.each(); 循环播放。

以下示例触发对每个具有data-league属性的元素的点击：

$('[data-league]').each(function() {
    $(this).trigger('click');
});

您还可以使选择器更具体，使其仅通过它们的共享类名称videoPanel匹配这些元素，例如

$('.videoPanel[data-league]').each(...);

将使用videoPanel类和属性data-league定位所有元素

要匹配您需要的完整示例，请执行以下操作：

var leagues = [];
$('.videoPanel[data-league]').each(function() {
    leagues.push($(this).attr('data-league'));
});

Answer 3

以下代码段将把所有data-league插入数组。

var leagues=[];
$('.vedioPnnel').each(function() {
     var league = $(this).data('league');
     leagues.push(league);
});
console.log(leagues);

Answer 4

我建议像下面的代码段一样使用javascript forEach函数。 或者，您可以使用：

document.querySelectorAll（'[id =“ 127”]'）;

要么

document.querySelectorAll（'[数据联盟]'）

 function getAllDataLeague() { var leagues = []; Array.prototype.forEach.call(document.getElementsByTagName('div'), function (value, index, traversed) { var attrVal = value.getAttribute('data-league'); if (attrVal) { leagues.push({'obj': value, 'data-league': attrVal}); } }); return leagues; } var eleFound = getAllDataLeague(); // print result in the html body document.body.innerHTML += '<p>To access elements: eleFound[index]["data-league"]</p>'; document.body.innerHTML += '<p>To trigger the click event: eleFound[index]["obj"].click()</p>'; document.body.innerHTML += '<p>Elements found:</p>'; for (var i = 0; i < eleFound.length; i++) { document.body.innerHTML += '<div>data-league:' + eleFound[i]["data-league"] + '</div>'; } 

 <div class="game-listing-group"> <div class="bold game-listing-name">CS:GO</div><div class="videoPanel vu-channel-tab" id="127" data-channel="https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf?channel=m0e_tv" data-league="1284"> <div class="video-thumbnail-con hidden-xs hidden-sm"> <img class="img-responsive video-thumbnail full-width" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_m0e_tv-320x180.jpg"> </div> <div class="videoPanelTextBg"> <p class="indexVideoPanelTitle">Dragon lore giveaway NOW</p> <span class="indexVideoPanelGoldCount vu-league-gold pull-right" style="display: none;"></span> </div> <div class="indexVideoPanelGoldCount video-upcoming"> <i class="glyphicon glyphicon-time"></i> <span class="vu-league-start"></span> </div> </div><div class="videoPanel vu-channel-tab" id="127" data-channel="https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf?channel=freakazoid_tv" data-league="1296"> <div class="video-thumbnail-con hidden-xs hidden-sm videoPanelTextBgActive"> <img class="img-responsive video-thumbnail full-width" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_freakazoid_tv-320x180.jpg"> </div> <div class="videoPanelTextBg"> <p class="indexVideoPanelTitle">BIRTHDAY IN 24HOURS! @c9freakazoid</p> <span class="indexVideoPanelGoldCount vu-league-gold pull-right" style="display: none;"></span> </div> <div class="indexVideoPanelGoldCount video-upcoming"> <i class="glyphicon glyphicon-time"></i> <span class="vu-league-start"></span> </div> </div><div class="videoPanel vu-channel-tab" id="127" data-channel="https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf?channel=gripex90" data-league="1301"> <div class="video-thumbnail-con hidden-xs hidden-sm"> <img class="img-responsive video-thumbnail full-width" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_gripex90-320x180.jpg"> </div> <div class="videoPanelTextBg"> <p class="indexVideoPanelTitle">Gripex - Most dedicated Lee sin! Top 50 Challenger</p> <span class="indexVideoPanelGoldCount vu-league-gold pull-right" style="display: none;"></span> </div> <div class="indexVideoPanelGoldCount video-upcoming"> <i class="glyphicon glyphicon-time"></i> <span class="vu-league-start"></span> </div> </div><div class="videoPanel vu-channel-tab" id="127" data-channel="https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf?channel=phantoml0rd" data-league="1346"> <div class="video-thumbnail-con hidden-xs hidden-sm"> <img class="img-responsive video-thumbnail full-width" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_phantoml0rd-320x180.jpg"> </div> <div class="videoPanelTextBg"> <p class="indexVideoPanelTitle">Level 400 Gambler LOL - Cycled over 3,000,000 in s</p> <span class="indexVideoPanelGoldCount vu-league-gold pull-right" style="display: none;"></span> </div> <div class="indexVideoPanelGoldCount video-upcoming"> <i class="glyphicon glyphicon-time"></i> <span class="vu-league-start"></span> </div> </div></div>