Loop through each element and store as variable

Question

I've got a system generated table that houses links in each of it's row elements. Each of these links has a unique 4 digit value at the end of the link.

The goal is to iterate through each of these table elements, grab the link it holds and then slice that link down to just the final 4 characters.

I've got this running right now:

HTML

<td class="lc_Cell">
    <p>
        <a href="thelink">Link #1</a>
    </p>
</td>
<td class="lc_Cell">
    <p>
        <a href="thelink">Link #2</a>
    </p>
</td>
<td class="lc_Cell">
    <p>
        <a href="thelink">Link #3</a>
    </p>
</td>
<td class="lc_Cell">
    <p>
        <a href="thelink">Link #4</a>
    </p>
</td>

Jquery

var TRLink = $(".lc_Cell > p > a").attr("href");   //The original URL the program spits out
var TR_ID = TRLink.slice(-4);   // Storing just the 4 digits I need
var NewLink = $(".lc_Cell > p > a").attr("href","mynewlinktosendsomeoneto"+ TR_ID); 
// my new link that utilizes the 4 characters from the original

This kind of works... the initial variable stores the link of the first instance it finds (in my actual code there are 3 others). When I create the NewLink variable it then overwrites ALL occurrences.

In a perfect world I'd iterate through and store the original links, do my slice and then iterate through and re-build a new link for each.

I came across the "each.()" command in jQuery but didn't have much luck getting a solution to work on my own.

Any help is greatly appreciated!

Rory McCrossan · Accepted Answer · 2019-03-11 14:35:40Z

2

To achieve this you could use map() to build an array of the last four characters of the href attributes of all the relevant a elements:

var ids = $('.lc_Cell a').map(function() {
  return this.href.slice(-4);
}).get();

console.log(ids);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="lc_Cell">
      <p>
        <a href="thelink1234">Link #1</a>
      </p>
    </td>
    <td class="lc_Cell">
      <p>
        <a href="thelink2345">Link #2</a>
      </p>
    </td>
    <td class="lc_Cell">
      <p>
        <a href="thelink3456">Link #3</a>
      </p>
    </td>
    <td class="lc_Cell">
      <p>
        <a href="thelink4567">Link #4</a>
      </p>
    </td>
  </tr>
</table>

That being said, given your aim to update the href attributes on the a elements it makes more sense in this case to provide a function to attr() which you can use to return a new value based on their current one. Something like this:

$('.lc_Cell a').attr('href', function(i, href) {
  var id = href.slice(-4); 
  return 'mynewlinktosendsomeoneto' + id; 
});

edited Mar 11, 2019 at 14:35

answered Mar 11, 2019 at 14:32

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user4759415 Over a year ago

HUGE help! Thanks a lot Rory that gives me pretty much all I need to get this done.

Rory McCrossan Over a year ago

No problem, glad to help. Note that I just added an edit regarding an even easier way to update all the href values in a single pass if you'd prefer that instead.

user4759415 Over a year ago

The edit is like magic! You're a god-send on this one. So just so I fully understand and am not just copy/pasting and moving along... Since I have multiple occurrences of the table cell this function essentially acts as a loop because it runs on each of those occurrences and then updates the link href before moving on to the next one?

Rory McCrossan Over a year ago

That's it exactly. The function inside attr() will be run on every instance of the .lc_Cell a element.

Collectives™ on Stack Overflow

Loop through each element and store as variable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related