使用JQuery从页面上的所有链接中获取锚点参数并替换目标链接的href

Question

I'm trying to obtain a set of href parameters from several different anchor links on a page and then pass those parameters to a target link. I believe I've arrived at about a 95% solution but I'm unable to pass all link parameters, it's only applying the parameter of the last anchor on the page.

When I run document.write(paramstr); inside the first function, I get all the parameters I'm looking for but when I run it inside the second function I'm only getting the last parameter. Perhaps I need to incorporate a loop inside the first function to append all the parameters so they don't get overwritten?

Here is the HTML & JS code I'm using:

    <!--This is the target link-->
    <a href="#" id="pay-all-auctions"><button class="button">
    Pay For All Auction Items
    </button>
    </a>
    <!--This is an example of an anchor link; about 20+ of these throughout the page-->
    <a  href="/my-account/my-auction/?yith-wcact-pay-won-auction=11364" 
        class="auction_add_to_cart_button button alt" 
        id="yith-wcact-auction-won-auction"> Add to cart </a>

<script>
    jQuery(document).ready(function($) {
        var href;
        var paramstr;
        $('a.auction_add_to_cart_button').each(function(){    // parse each link
            href = $(this).attr('href');   // get the href of the anchor
            for (var i = 0; i < href.length; i++) {
            paramstr = href.split('/')[3]; // get the parameter of interest
            }
        }); 

        $("a[href*=#]").attr("href", function(){
            // replace the target link href with the parameters of interest
            return href.replace('#',paramstr); 
        });
    });

</script>

Here is the expected output in console:

?yith-wcact-pay-won-auction=11364
(index):640 ?yith-wcact-pay-won-auction=11361
(index):640 ?yith-wcact-pay-won-auction=11357
(index):640 ?yith-wcact-pay-won-auction=11356
(index):640 ?yith-wcact-pay-won-auction=11365
(index):640 ?yith-wcact-pay-won-auction=11376
(index):640 ?yith-wcact-pay-won-auction=11358
(index):640 ?yith-wcact-pay-won-auction=11354
(index):640 ?yith-wcact-pay-won-auction=11345
(index):640 ?yith-wcact-pay-won-auction=11408
(index):640 ?yith-wcact-pay-won-auction=11407
(index):640 ?yith-wcact-pay-won-auction=11406
(index):640 ?yith-wcact-pay-won-auction=11405
(index):640 ?yith-wcact-pay-won-auction=11404
(index):640 ?yith-wcact-pay-won-auction=11398
(index):640 ?yith-wcact-pay-won-auction=11397
(index):640 ?yith-wcact-pay-won-auction=11396
(index):640 ?yith-wcact-pay-won-auction=11395
(index):640 ?yith-wcact-pay-won-auction=11394
(index):640 ?yith-wcact-pay-won-auction=11393
(index):640 ?yith-wcact-pay-won-auction=11392
(index):640 ?yith-wcact-pay-won-auction=11391
(index):640 ?yith-wcact-pay-won-auction=11390
(index):640 ?yith-wcact-pay-won-auction=11389
(index):640 ?yith-wcact-pay-won-auction=11388

Answer 1

If you want the result to be ?yith-wcact-pay-won-auction=11363&?yith-wcact-pay-won-auction=11364&?yith-wcact-pay-won-auction=11365&?yith-wcact-pay-won-auction=11366 I don't know how you'll work with something like this specially its not a valid url and the same parameter name but anyway you can use the next code to get this result

• No need to use for loop
• Also no need to use function and replace in .attr

 jQuery(document).ready(function($) { var paramstr =""; $('a.auction_add_to_cart_button').each(function(){ // parse each link var href = $(this).attr('href'); // get the href of the anchor paramstr += href.split('/')[3]+'&'; // get the parameter of interest }); paramstr = paramstr.slice(0, -1); // remove the last & console.log(paramstr); //$("#pay-all-auctions").attr("href", paramstr); $("#pay-all-auctions").attr("data-auctions", paramstr); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--This is the target link --> <a href="#" id="pay-all-auctions"><button class="button"> Pay For All Auction Items </button> </a> <!--This is an example of an anchor link; about 20+ of these throughout the page --> <a href="/my-account/my-auction/?yith-wcact-pay-won-auction=11363" class="auction_add_to_cart_button button alt" id="yith-wcact-auction-won-auction"> Add to cart </a> <a href="/my-account/my-auction/?yith-wcact-pay-won-auction=11364" class="auction_add_to_cart_button button alt" id="yith-wcact-auction-won-auction"> Add to cart </a> <a href="/my-account/my-auction/?yith-wcact-pay-won-auction=11365" class="auction_add_to_cart_button button alt" id="yith-wcact-auction-won-auction"> Add to cart </a> <a href="/my-account/my-auction/?yith-wcact-pay-won-auction=11366" class="auction_add_to_cart_button button alt" id="yith-wcact-auction-won-auction"> Add to cart </a>

Finally: The result It's not a valid value to add to the anchor href with this type of values you can use data attribute instead

Additional Information

• The parameter in href shoud look like ?p1=1&p2=2&p3=3

• If you have a same parameter in the url ?p1=1&p1=2 for example php $_GET['p1'] will return the last parameter value