How to open multiple links at once using jQuery script

Question

I have a chart of customers where I need to manually open each customer by "opening in new tab"

I am trying to use a jQuery script so that when I input the script in the console it will open every customer link within that page for me.

Below is the code I have right now. This code works to an extent that it opens only the first customer link out of the 50 in the customer page. Can anyone help me to configure it so it will open every customer in a new tab on the given page?

(I am using the latest version of chrome as my browser)

var $pbfLinks = $('.name a');
     for (var i = 0; i < $pbfLinks.length; i++) {
          var element = $pbfLinks[i];
          var $pbfLink = $(element);
             $pbfLink.attr('target', '_blank');
             $pbfLink[i].click(function() {
                     window.open($pbfLink);
  });
};



 <tbody>
                          <tr data-bind-class="{selected: bulkOperations.selected[6463344]}"
                              data-define="{nestedLinkContainer: new Shopify.NestedLinkContainer(this)}">
                            <td class="select">
                              <div class="next-input-wrapper"><label class="next-label helper--visually-hidden next-label--switch" for="customer_ids_6463344">Select customer, Mayra </label><input type="checkbox" name="customer_ids_6463344" id="customer_ids_6463344" value="6463344" bind="bulkOperations.selected[6463344]" bind-event-change="bulkOperations.selectionChanged()" class="next-checkbox" /><span class="next-checkbox--styled"><svg class="next-icon next-icon--size-10 checkmark"> <use xlink:href="#next-checkmark-thick" /> </svg></span></div>
                            </td>
                            <td class="name no-wrap">
                              <a data-nested-link-target="true" href="/admin/customers/6463344">Mayra </a>
                                                          </td>
                            <td class="location type--subdued">
                                 US
                            </td>
                            <td class="orders tc">0</td>
                            <td class="last_order tc">
                                &mdash;
                            </td>
                            <td class="money_spent tr">$0.00</td>
                          </tr>
                          <tr data-bind-class="{selected: bulkOperations.selected[6463317764]}"

Possible duplicate of [How to make a link open multiple pages when clicked](https://stackoverflow.com/questions/7064998/how-to-make-a-link-open-multiple-pages-when-clicked) — P.S., Jul 29 '17 at 18:41
This is not related to the post that may be a possible duplicate. The post given is to give each specific link. My issues is that I need multiple random links to be opened by using jQuery. — Andrew Lee, Jul 29 '17 at 18:43
I have updated the post with the html code @AakashVerma. Thank you — Andrew Lee, Jul 29 '17 at 19:01
I don't understand why the function is returning false though. — Aakash Verma, Jul 29 '17 at 19:11

score 1 · Answer 1 · answered Jul 29 '17 at 20:53

Based on information provided on your question, what you are trying to achieve could be done this way.

  var links = $('a[data-nested-link-target="true"]'); 
 Array.from(links).forEach(function(link){
  window.open(link.href, '_blank')  
 });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<a data-nested-link-target="true" href="http://www.google.com">Google </a>
<a data-nested-link-target="true" href="http://www.facebook.com">Facebook </a>
<a data-nested-link-target="true" href="http://www.twitter.com">Twitter </a> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 
</body>
</html>

This is based on the assumption that all customer link have data-nested-link-target="true"attribute; Here is a jsbin of the above code https://jsbin.com/dejotol/edit?html,js,output

score 0 · Answer 2 · answered Jul 29 '17 at 18:52

0

You can use this code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function() {
    var linksArray =['https://www.google.com','http://www.facebook.com','http://www.stackoverflow.com'];
    var i;
    $('#open').click(function() {
      for( i=0; linksArray.length > i; i++){
        window.open(linksArray[i]);
      }
    });
});
</script>
</head>
<body>

<button id="open" class="button">Open Tabs</button>

</body>
</html>

answered Jul 29 '17 at 18:52

Chandra Kumar

4,127
1
17
25

Thank you for your help. Just to be sure this code will require me to input each link individually within the array? and if so is there a way where instead of manually inputting the links.. I can just loop and/or iterate through each "class name" where the link is stored? In my example you can see all the links I am trying to retrieve is from ".name a". Every link I need to open in a new tab is contained in the same class name but different levels. – Andrew Lee Jul 29 '17 at 18:55

score 0 · Answer 3 · answered Jul 29 '17 at 19:28

The HTML code you've posted on request looks incomplete. Hoping the structure to be somewhat like

<div class="name"...>
<tr>
<td>
<a href="...>
</td>

Try this:

$('.name > tr > td').each(function() {
    var $this = $(this > a);
    $this.attr('target', '_blank');
    $this.click(function() {
        window.open($this.attr('href'));
        window.focus();
        return false;
  });
});

How to open multiple links at once using jQuery script

3 Answers3