Получить все значения атрибутов HREF из якорей в неупорядоченном списке и поместить эти значения href в тег привязки внутри элемента div

Мне нужна помощь с jQuery для получения значений href от всех якорей в элементе li, а затем для создания нового элемента div с тегом привязки внутри этого li и помещения всех этих значений ссылки href в этот вновь созданный тег привязки с помощью только что созданного элемента div.
Например, это моя структура HTML, как показано ниже:

<div id="navbar">
    <ul class="ulcls">
        <li><a href="google.com">Google</a></li>;
        <li><a href="yahoo.com">Yahoo</a></li>;
        <li><a href="facebook.com">Facebook</a></li>;
        <li><a href="youtube.com">Youtube</a></li>;
        <li><a href="google.com">Google</a></li>;
    </ul>
</div>

Я попытался с помощью этого кода JQuery ниже:-

$(document).ready(function() {
    $('#navbar ul li').each(function() {
        $(this).append('<div class="sd"><a href=""></a></div>');
        //$("div.sd a").attr("href", 'd'); 
    });
    $('#navbar ul li a').each(function() {
        //console.log($(this).attr('href')); 
        var d = $(this).attr('href');
        $('div.sd a').attr('href', 'd');
    });
});

Спасибо и всего наилучшего

Источник

4 ответа

Решение
$(document).ready(function() {
    $('#navbar ul li').each(function() {
        $(this).append('<div class="sd"><a href=""></a></div>');
    });
    $('#navbar ul li a').each(function() {
        var d = $(this).attr('href');
        $(this).next().find('a').attr('href', d); // d is a  variable. not a string. Avoid  single quotes
    });
});

DEMO

Проблема в вашем коде была в том, что вы пытались добавить d как строка

Источник

Это сделает свое дело.

$('.ulcls a').each(function(index, value) {
  $('body').append($(this).attr('href') + "<br/>");
})

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

https://codepen.io/anon/pen/wMbyxq

Источник

Попробуй это:

$(document).ready(function() {
    $('#navbar a').each(function() {
         var $a = $(this),
             $li = $a.parent();

         $li.append('<div class="sd"></div>');
         $li.children().last().append($a);
    });
});

Вот JS Bin. Я положил setTimeout() Функция для вас, чтобы увидеть разницу между до и после <div>s.

Источник

Проверьте этот код ниже. Надеюсь, это поможет вам.

var linksList='';
$('#navbar').find('a').each(function() {
  linksList=linksList+$(this).attr('href');
});
var e = $("<div id='newLink'><a id='newLink'>test</a></div>");
$('#navbar').append(e);    
e.find('a').attr('href', linksList);
Источник
Другие вопросы по тегам