Добавить домен в гиперссылки после функции .load

Question

Я пытаюсь изменить (внутренние) гиперссылки загруженного контента на внешний (путем добавления домена в href), но что-то работает неправильно или загружено в правильном порядке ...

Этоэто то, что я пробовал до сих пор.

Сначала я создал страницу php loadingmodels.php , только с этим в нем:

<?php echo file_get_contents($_GET['url']); ?>

Затем я загружаювнешний контент в моем контенте div:

$(function(){
    var contentURI= 'https://somepage #model-selector';
    $('#content').load('loadingmodels.php?url='+ contentURI);
});

Это загружает данные, подобные этим, в моем контенте div:

<div class="model-selector" id="model-selector">
      <div class="car-row">
            <div class="car-item item1" data-id="20">
                <a href="/link1" class="btn-car-more">
                    <div class="thumbnail">
                        <img src="image.png" alt="Name1">
                    </div>
                    <h3 class="model-name">Name1</h3>
                </a>
            </div>
            <div class="car-item item2" data-id="3">
                <a href="/link2" class="btn-car-more">
                    <div class="thumbnail">
                        <img src="image.png" alt="Name2">
                    </div>
                    <h3 class="model-name">Name2</h3>
                </a>
            </div>
      </div>
</div>

Наконец, и это я не могу приступить к работе, я хотел быдобавить домен во внутренние гиперссылки;то есть, измените "/ link1" на "https://someotherpage/link1".

Это то, что я пробовал (помещено под приведенным выше кодом):

$(function(){
    $("a.btn-car-more").each(
        function() {
            href = $(this).attr('href');
            new_href = 'https://someotherpage' + href;
            $(this).attr('href', new_href);
        }
    );
});

У кого-нибудь есть идея, почему этоне работает?

Answer 1

Проблема в том, что вызов load() является асинхронным. Поэтому вы пытаетесь изменить .btn-car-more ссылки до , которые существуют в DOM.

Чтобы исправить это, вам нужно запустить свою логику в обратном вызове метода load(),чтобы убедиться, что HTML был введен в DOM первым. Попробуйте это:

jQuery(function($) {
  var contentURI = 'https://somepage #model-selector';
  $('#content').load('loadingmodels.php?url=' + contentURI, function() {
    $('a.btn-car-more[href^="/"]').attr('href', function(i, href) {
      return 'https://someotherpage' + href;
    });
  });
});

В приведенном выше примере есть пара моментов, на которые стоит обратить внимание. Во-первых, я использовал селектор «атрибут начинается с», чтобы нацеливаться только на атрибуты href, относящиеся к исходному пути. Во-вторых, вы можете избежать явного цикла each(), передав функцию attr(), эта функция будет выполняться для каждого элемента в коллекции.