javascript - How to get a DIV element's value, put them into array and use them later. JSJquery - Stack Overflow

admin管理员组

文章数量:1414605

I'd like to get the data-league values of all of those divs, and put them into an array.

What I want to do: Get all those values, save them, and then loop through them, and call a .click on those divs.

I don't know if there's an easier way to do this.

I guess it also has to loop through the divs where ID=128, and find the data-league values, right?

Honestly I'm pletely stuck, so any help whatsoever would be appriciated.

Thank you.

Extra info: Basically the end result being, on click of a button, all those 'thumbnails' should open in a new tab. All tabs being different streams. (See image)

I'd like to get the data-league values of all of those divs, and put them into an array.

What I want to do: Get all those values, save them, and then loop through them, and call a .click on those divs.

I don't know if there's an easier way to do this.

I guess it also has to loop through the divs where ID=128, and find the data-league values, right?

Honestly I'm pletely stuck, so any help whatsoever would be appriciated.

Thank you.

Extra info: Basically the end result being, on click of a button, all those 'thumbnails' should open in a new tab. All tabs being different streams. (See image)

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 1, 2015 at 9:19 Paramone asked Dec 1, 2015 at 9:12 ParamoneParamone 2,73444 gold badges3434 silver badges6060 bronze badges 7

• 4 I guess it also has to loop through the divs where ID=128 This is not possible as id attributes must be unique within a document. You should use classes to group mon elements instead. – Rory McCrossan Commented Dec 1, 2015 at 9:13
• 2 you are using same ids for different elements that is wrong. – Jai Commented Dec 1, 2015 at 9:13
• @Jai I agree with you on that, however I'm not the owner of the website. I'm simply editing it to my likings :) – Paramone Commented Dec 1, 2015 at 9:14
• In the example you provided the same id (128) has been used multiple times. This is not allowed. Iterating through the ids will not work – cezar Commented Dec 1, 2015 at 9:15
• Check out the element (if you'd like) on "Vulcun.". That's the website I'm trying write a script on. – Paramone Commented Dec 1, 2015 at 9:16

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 2

In the example you provided the same id (128) has been used multiple times. This is not allowed. Iterating through the ids will not work.

This means you have to look for another possibility. Getting all div elements with a certain class would be possible, like in the example:

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

Now you can iterate through this collection, extract the values for the attribute data-league and save them somewhere, for example in an array:

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

Now you have all values in the array dataLeagueValues. You can use them further in your script.

You could use the $('[attribute]') selector to select elements with data-league, you can then use .each(); to loop them.

The following example triggers a click on every element with a data-league attribute:

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

You could also make the selector more specific to only match these elements by their shared class name videoPanel e.g.

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

Will target all elements with a class of videoPanel and an attribute data-league

To match what you need the full example would be:

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

Following code snippet will your insert all data-league into an array.

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

I propose to use the javascript forEach function like in the folowing snippet. Alternatively you can use:

document.querySelectorAll('[id="127"]');

or

document.querySelectorAll('[data-league]')

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/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/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-uping">
        <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/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/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-uping">
        <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/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/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-uping">
        <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/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/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-uping">
        <i class="glyphicon glyphicon-time"></i>
        <span class="vu-league-start"></span>
    </div>

</div></div>

本文标签：