Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Как получить атрибут href ссылок и установить для него значение href следующего брата с помощью jquery?

Автор вопроса: KevmonОтветов: 3

У меня есть страница с несколькими динамически генерируемыми ссылками (через Liquid, это сайт Shopify), и все они имеют один и тот же класс. Каждая ссылка связана с другой ссылкой (изображением), и я хотел бы применить атрибут href каждой ссылки к связанной с ней второй ссылке.

Я предполагаю, что мне нужно вытащить их все в объект массива, а затем распределить их в том же порядке, но я потерялся. Какие-либо предложения?

Пример в HTML:

<a class="initial-link" href="http://some-link-1"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-2"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-3"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-4"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-5"></a>
<a href="" class="empty-link"><img src="" alt=""></a>

По сути, я хочу получить значение href каждого .initial-link и применить их к соответствующему .empty-link href.

Спасибо

  • Нам бы очень помогло увидеть ваш HTML Rory McCrossan 16.09.2016
  • как узнать какая ссылка относится к какому img ? madalinivascu 16.09.2016
  • Ах, хорошо, только что обновил вопрос Kevmon 16.09.2016

javascripthtmljqueryattributeshref

Ответы

Ответ 1 · рейтинг 1 · madalinivascu

Сделайте цикл, выберите следующий элемент, используя next(), используйте attr(), чтобы получить и добавить URL-адрес

<a class="initial-link" href="http://some-link-1"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-2"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-3"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-4"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-5"></a>
<a href="" class="empty-link"><img src="" alt=""></a>

js:

 $(document).ready(function(){
      $('.initial-link').each(function(){
        var href = $(this).attr('href');
        $(this).next().attr('href',href);
      });
    })

demo: 

     $(document).ready(function() {
       $('.initial-link').each(function() {
         var href = $(this).attr('href');
         $(this).next().attr('href', href);
       });
     })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="initial-link" href="http://some-link-1">1</a>
<a href="" class="empty-link">e1
  <img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-2">2</a>
<a href="" class="empty-link">e2
  <img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-3">3</a>
<a href="" class="empty-link">e3
  <img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-4">4</a>
<a href="" class="empty-link">e4
  <img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-5">5</a>
<a href="" class="empty-link">e5
  <img src="" alt="">
</a>

или перебрать пустую ссылку и выбрать href предыдущей ссылки (начальной ссылки), используя prev() и attr():

$(document).ready(function(){
      $('.empty-link').each(function(){
        var href = $(this).prev().attr('href');
        $(this).attr('href',href);
      });
    })

демо:

$(document).ready(function(){
      $('.empty-link').each(function(){
        var href = $(this).prev().attr('href');
        $(this).attr('href',href);
      });
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="initial-link" href="http://some-link-1">1</a>
<a href="" class="empty-link">e1
  <img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-2">2</a>
<a href="" class="empty-link">e2
  <img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-3">3</a>
<a href="" class="empty-link">e3
  <img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-4">4</a>
<a href="" class="empty-link">e4
  <img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-5">5</a>
<a href="" class="empty-link">e5
  <img src="" alt="">
</a>

Примечание: удалите пустой href из начальной ссылки, у вас уже есть атрибут href

Ответ 2 · рейтинг 1 · gavgrif

Переберите ссылки и возьмите href, а затем передайте href следующей ссылке. Обратите внимание, что я добавил a1 - e2 в качестве текста ссылки, чтобы продемонстрировать, что каждая ссылка теперь имеет href. (1 - это начальные ссылки, а 2 - это те, которые были заданы функцией. Я также очистил пустые ссылки на ваших начальных ссылках.

$(document).ready(function(){

  $('.initial-link').each(function(){
    var linkHref = $(this).attr('href');
   $(this).next('.empty-link').attr('href',linkHref)
  });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="initial-link" href="http://some-link-1">a1</a>
<a class="empty-link"><img src="" alt="">a2</a>
<a  class="initial-link" href="http://some-link-2">b1</a>
<a class="empty-link"><img src="" alt="">b1</a>
<a class="initial-link" href="http://some-link-3">c1</a>
<a class="empty-link"><img src="" alt="">c1</a>
<a class="initial-link" href="http://some-link-4">d1</a>
<a class="empty-link"><img src="" alt="">d2</a>
<a class="initial-link" href="http://some-link-5">e1</a>
<a class="empty-link"><img src="" alt="">e2</a>

Ответ 3 · Mohammad

Вы можете повторить все .empty-link, используя .attr(), и получить href атрибут предыдущей ссылки (.initial-link) в цикле.

$(".empty-link").attr("href", function(){
    return $(this).prev(".initial-link").attr("href");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="initial-link" href="http://some-link-1">initial</a>
<a href="" class="empty-link">
  <img src="" alt="">empty
</a>
<a class="initial-link" href="http://some-link-2">initial</a>
<a href="" class="empty-link">
  <img src="" alt="">empty
</a>
<a class="initial-link" href="http://some-link-3">initial</a>
<a href="" class="empty-link">
  <img src="" alt="">empty
</a>
<a class="initial-link" href="http://some-link-4">initial</a>
<a href="" class="empty-link">
  <img src="" alt="">empty
</a>
<a class="initial-link" href="http://some-link-5">initial</a>
<a href="" class="empty-link">
  <img src="" alt="">empty
</a>

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы