Question 232849 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Replace multiple link with button

I have a code that works to replace the url of a link with a given id

I want this code to work for multiple links and player with the same specified id or class

I have one button that should change all together

Can you guide me or help me?

$(document).ready(function(){
$('#change').on('click', function(e) {
 var purl = $("#urlchange").attr("href");
purl = purl .replace("dl.faz2music.ir", "up.faz2music.ir");
 $("#urlchange").attr("href",purl);
notice.showToast({text: 'Links converted',type: 'success',showClose: true});
});
});

<button id="change" class="ltr">change link's</button>

<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3"  id="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [128].mp3"  id="urlchange">Download</a>

<audio><source type="audio/mp3" src="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" id="urlchange"></audio>
<audio><source type="audio/mp3" src="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [128].mp3" id="urlchange"></audio>

This code replaces only one link

I want to be able to do the same for several links with the same ID or Class

Jquery

Tags:

3

Answers


  1. 0

    Using each and a class:

    $(document).ready(function() {
  $('#change').on('click', function(e) {
    const from = "dl.faz2music.ir";
    const to = "up.faz2music.ir";
    $(".urlchange").each(function() {
      if (this.matches("source")) {
        console.log()
        this.setAttribute("src", this.getAttribute("src").replace(from,to))
      }  
      else this.href = this.href.replace(from,to);
    });
    /*
    notice.showToast({
      text: 'Links converted',
      type: 'success',
      showClose: true
    });
    */
    alert("Links changed");
  });
  $("audio").on("mouseenter", (e) => console.log(e.target.querySelector("source").getAttribute("src")))
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<button type="button" id="change">Change</button>

<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<hr/>
<audio controls><source type="audio/mp3" src="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange"></audio><br/>
<audio controls>Audio<source type="audio/mp3" src="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [128].mp3" class="urlchange"></audio>
    Login or Signup to reply.
  2. 0

    You need to assign same class to anchor tags as you can not assign same ids to multiple tags

     $(document).ready(function () {
        $('#change').on('click', function (e) {
            $('.urlchange').prop('href',  (i, val) => {
                return val.replace("dl.faz2music.ir", "up.faz2music.ir");
            });
           // notice.showToast({ text: 'Links converted', type: 'success', showClose: true });
        });
 });
     <script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>

<button id="change" class="ltr">Change links</button>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
    Login or Signup to reply.
  3. 0

    As you’re using , note that .attr has an overload which takes a callback:

    http://api.jquery.com/attr/#attr-attributeName-function

    .attr( attributeName, function )

    attributeName – Type: String
    The name of the attribute to set.

    function Type: Function( Integer index, String attr ) returns String or Number
    A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old attribute value as arguments.

    So, combining with using a class as suggested in other comments/answers, your code becomes:

    $(".urlchange").attr("href", (_, href) => href.replace("dl.faz2music.ir", "up.faz2music.ir"));

    Updated snippet:

    $(document).ready(function() {
  $('#change').on('click', function(e) {

    $(".urlchange").attr("href", (_, href) =>
      href.replace("dl.faz2music.ir", "up.faz2music.ir"));

    console.log("urls updated");
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [128].mp3" class="urlchange">Download</a>

<button id="change" class="ltr">change links</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search