jQuery - match element between two HTML

Trying to load a from an add-on HTML file whenever there matching in the main HTML. I don't want to call out each , this will make a lot of lines since we will have a ton of icons for the end user. Is there a way to auto scran > find > load? Thank you

$( "#icon-arrow" ).load( "/icon-svg-load.html #icon-arrow" );
<a href="#" class="icon" id="icon-arrow">
</a>

<a href="#" class="icon" id="icon-circle">
</a>

<a href="#" class="icon" id="icon-left">
</a>

1 answer

  • answered 2019-05-24 21:50 Barmar

    Loop over all the icons, get the ID, and then use that in the URL to load.

    $(".icon").each(function() {
      $(this).load(`/icon-svg-load.html #${this.id}`);
    });