Как добавить ссылку на каждый элемент списка?

В основном у меня есть список, и я хочу использовать js или jquery для добавления в href для моей страницы поиска.

<aside class="listlinks">
        <ul>
            <li>CRM</li>
            <li>CTI</li>
            <li>Call Center</li>
            <li>Data warehouse</li>
            <li>Documentum D2</li>
            <li>MDM</li>
            <li>SharePoint</li>
        </ul>
    </aside>

$('.listlinks').each(function(){
    $(this).wrapInner('<a href="\search.php?' + $(this).html() + '" />');
});
3
Rayen Kamta 18 Дек 2015 в 20:54

4 ответа

Лучший ответ

Ваш пример будет работать до тех пор, пока вы обновите селектор jQuery, чтобы он соответствовал элементам списка, а не родительскому списку, например заменить .listlinks на .listlinks ul li. Вам также следует убедиться, что вы правильно закодировали текст в href части с помощью encodeURI или encodeURIComponent.

Вам действительно не нужен jQuery для этого, и использование чистого Javascript и конкатенация вручную сэкономит вам 3-4 вызова функции на элемент списка.

$('.listlinks ul li').each(function(){
    this.innerHTML = '<a href="\search.php?' + encodeURIComponent(this.innerHTML) + '">' + this.innerHTML + '</a>';
});

Вы можете сократить это еще больше, пожертвовав одним вызовом функции на элемент списка и используя String.prototype.link. Метод link автоматически переносит строковые объекты с гиперссылкой на предоставленный URL-адрес.

$('.listlinks ul li').each(function(){
    this.innerHTML = this.innerHTML.link('\search.php?' + encodeURIComponent(this.innerHTML));
});
3
Marie 21 Дек 2015 в 17:48

Ты мог бы сделать

$('.listlinks ul li').each(function(){
    var text = $(this).html();
    $(this).html('<a href="\search.php?' +  encodeURIComponent(text) + '">' + text +  '</a>');
});

Обновление: не забудьте закодировать текст в URL. Просто вспомнил, что

0
Lucas 18 Дек 2015 в 18:05

@ Райен Камта попробуйте это:

$.each($('.listlinks li'),function(k,v){
    $(v).wrap('<a href="\search.php?' + $(v).html() + '" />');
});
0
Igor Danylov 18 Дек 2015 в 18:09
$('.listlinks ul li').each(function(){
    $(this).append('<a href="\search.php?' + $(this).html() + '" />');
});
1
gurvinder372 18 Дек 2015 в 17:59