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

У меня есть страница с несколькими динамически генерируемыми ссылками (через 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.

Спасибо


javascript html jquery attributes href
person Kevmon    schedule 16.09.2016    source источник
comment
Нам бы очень помогло увидеть ваш HTML   -  person Rory McCrossan    schedule 16.09.2016
comment
как узнать какая ссылка относится к какому img ?   -  person madalinivascu    schedule 16.09.2016
comment
Ах, хорошо, только что обновил вопрос   -  person Kevmon    schedule 16.09.2016

Ответы (3)


arrow_upward
1
arrow_downward

Сделайте цикл, выберите следующий элемент, используя 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

person madalinivascu    schedule 16.09.2016

arrow_upward
1
arrow_downward

Переберите ссылки и возьмите 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>

person gavgrif    schedule 16.09.2016
comment
Первоначально я использовал массив, поскольку hte OP ссылался на него в вопросе, но затем изменил свой ответ, чтобы изменить href с помощью .next() - person gavgrif; 16.09.2016

arrow_upward
0
arrow_downward

Вы можете повторить все .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>

person Mohammad    schedule 16.09.2016