Заменить ссылки на странице

117
14 января 2021, 19:30

Есть много ссылок. Нужно дописать им якорь на другую страницу.

Типа такого:

$(document).ready(function () { 
 
    var href = $('ul a').attr('href'); 
    var hrefGo = '/#discussion'; 
    var hrefNew = href + hrefGo; 
    $('ul a').attr('href', hrefNew); 
 
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li><a href="feedback1">Отзывы 1</a></li> 
  <li><a href="feedback2">Отзывы 2</a></li> 
  <li><a href="feedback3">Отзывы 3</a></li> 
</ul>

Но у меня есть проблема. Я получаю все ссылки, но в момент редактирования, оно берет только первую ссылку и потом её же вставляет всем остальным. Как тут правильно получать и редактировать ссылки?

Answer 1

используйте each для перебора ссылок и изменения их значений

$("ul a").each(function(){ 
     var href  = $(this).attr('href') + "#discussion";
     $(this).attr('href',  href ); 
 });

Как вариант можно не менять ссылки, а заменить обработчик клика, который будет добавлять якорь, а потом переходить вручную.

Answer 2

Проблема в том что jQuery берет только первый элемент и по другим не ходит. Это можно решить, просто перебрав все элементы.

<a href="#" class="link">1</a>
<a href="#" class="link">2</a>
<a href="#" class="link">3</a>
<a href="#" class="link">4</a>
<a href="#" class="link">5</a>
<a href="#" class="link">6</a>
<a href="#" class="link">7</a>
<a href="#" class="link">8</a>
<a href="#" class="link">9</a>
<a href="#" class="link">10</a>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    for(let i of $("a")){
        var href = $(i).attr('href');
        var hrefGo = '/#discussion';
        var hrefNew = href + hrefGo;
        $(i).attr('href', hrefNew);
    }
</script>
Answer 3

$(document).ready(function () { 
    $("ul a[href!='#']").each(function(idx, itm){ 
      var lastCharIdx = itm.href.length - 1, 
        href = itm.href[lastCharIdx] === "/" 
          ? itm.href.substr(0, lastCharIdx) 
          : itm.href; 
      itm.href = href + "/#discussion"; 
      console.log(itm.href); 
    }); 
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<ul> 
  <li><a href="https://google.com">link 1</a></li> 
  <li><a href="https://yandex.ru">link 2</a></li> 
  <li><a href="https://mail.ru">link 3</a></li> 
  <li><a href="#">not link</a></li> 
</ul>

READ ALSO
Internet Explorer 8 не вызывается jquery ajax success callback

Internet Explorer 8 не вызывается jquery ajax success callback

Добавляю совместимость интернет-магазина с Internet Explorer 8, для этого использую версию JQuery 110

127
Как построить сетку с одним большим элементом?

Как построить сетку с одним большим элементом?

Подскажите, как реализовать такую сетку?

93
Валидация полей формы ajax

Валидация полей формы ajax

У меня есть форма с текстовым полем и двумя кнопками (Перва - отправляет сообщение, вторая - очищает текущий список)Пример работы показан по ссылке...

105
Блок выходит за границы родителя

Блок выходит за границы родителя

Делаю сайт с 100% по высоте страницамиЕсть 2 вопроса

95