jquery or vanilla javascript auto load(jquery load) all link content in page

Question

I saw the options for downloading links, but did not find there the automatic download of all links.

I need automatic loading, it's not important to use jquery load or ajax or http request or loadPageSection. Any option is fine.

First I came up with the simplest version with the click emulation, on each link.

$(function() {
  document.querySelector('.className').click();
});

$("a").click(function() {
  $("#pageLoad").load($(this).attr("href"));
  return false;
});

However, it worked as a redirect, redirecting to the first page. Next, I replaced the click on each (function() , everything works although until now only the first page is loaded

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
  $('a').each(function() {
    $(".pageLoad").load($(this).attr('href') );
  });
});
</script>
<table align="center">
  <tr><td>
  <a href="test.html" class="className">first</a>
  <div class="pageLoad"></div></td><td>
  <a href="test1.html" class="className">second</a>
  <div class="pageLoad"></div></td><td>
  <a href="test.html" class="className">third</a>
  <div class="pageLoad"></div></td></tr>
</table>

It is necessary that all pages are loaded. under each <a href Ideally, there should not be a <div class = "pageLoad"> and everything should be added automatically generating a div and perhaps added as a child.

And most importantly, jQuery makes it possible to use load ('test.html #target'); to download the required element, how to do it now?

$(". pageLoad").load($ (this #target).attr ('href')); does not work?

How to download the required fragment in this case?

And the last: if there are also links in the loaded page, will there be any problems? Now while all is loaded 1 time there are no problems.

It is necessary to load the contents of links only once for all links on the page.

The solution to these problems is too complex for me.

update:

<script>
$.ajaxSetup({
'beforeSend' : function(xhr) {
xhr.overrideMimeType('text/html; charset=windows-1251');
},
});

$(function () {
$('a').each(function() {
$(this).parent().find(".pageLoad").load($(this).attr('href') + ' #inf-1751');
});
});
</script>

I fixed the display of the encodings. The last problem is to use the anchors on the elements. If you only add anchor, then load a copy of the page, if to another page, the anchor also does not work, loading the entire page.

Answer 1

If you want to load each page into each your link related container .pageLoad , then it might look like that.

$('a').each(function() {
   $(this).parent().find(".pageLoad").load($(this).attr('href') );
});

If you would like to add .pageLoad on fly

$('a').each(function() {
   $(this).after('<div class="pageLoad"/>').load($(this).attr('href'));
});

No need to add .pageLoad manually

<table align="center">
  <tr>
    <td>
       <a href="test.html" class="className">first</a>
    </td>
    <td>
       <a href="test1.html" class="className">second</a>
    </td>
    <td>
       <a href="test.html" class="className">third</a>
    </td>
  </tr>
</table>