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>

如何获取DIV元素的值，将它们放入数组并稍后使用它们。 JS / jQuery的

4 个答案: