Як додати елемент списку до існуючого не упорядкованого списку?


548

У мене є такий код:

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

Я хочу використовувати jQuery, щоб додати до списку наступне:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

Я спробував це:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

Але це додає нове li всередині останнього li(безпосередньо перед закриваючим тегом), а не після нього. Який найкращий спосіб додати це li?

Відповіді:


816

Це зробить це:

$("#header ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Дві речі:

  • Ви можете просто прикласти <li>до <ul>себе.
  • Потрібно використовувати протилежний тип лапок, ніж ті, що ви використовуєте у своєму HTML. Отож, оскільки ви використовуєте подвійні лапки у своїх атрибутах, оточіть код одинарними лапками.

6
Чи не має бути це "#header" замість "#content"?
Діпак

15
як бічну ноту, ви можете використовувати препенд, а не додавати, якщо ви хочете додати як перший елемент замість останнього
Томас

517

Ви можете зробити це також більш "об'єктним способом" і все ще легко читати:

$('#content ul').append(
    $('<li>').append(
        $('<a>').attr('href','/user/messages').append(
            $('<span>').attr('class', 'tab').append("Message center")
)));    

Тоді вам не доведеться боротися з цитатами, але слід слідкувати за дужками :)


Не став би ваш підхід запускати нові теги, але не закриватиме їх?
Евертон

1
Ні, jquery створює теги, використовуючи маніпуляції з DOM, тому він повинен знати лише його ім'я
Дунайський моряк

Мені це подобається. Я ненавиджу возитися із зав'язками та цитати :) ДО РЕЧІ: Інший варіант був би stackoverflow.com/a/4673436/112000
Томаш Fejfar

2
Це набагато кращий спосіб, тобто використання більш об'єктно-орієнтованого способу.
Буде

Чи є можливість одночасно додати множину ??
Тянь

51

Як щодо використання "після" замість "додати".

$("#content ul li:last").after('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

".after ()" може вставляти вміст, визначений параметром, після кожного елемента в набір відповідних елементів.


3
Дякую, це мені допомогло. Щоб вставити в середину списку, потрібно використовувати beforeабо after.
Патрік Фішер

1
це в поєднанні з відповіддю @ Danubian_Sailor потрапило на місце для мене
bkwdesign

50

Якщо ви просто додаєте текст li, ви можете використовувати:

 $("#ul").append($("<li>").text("Some Text."));

20

jQuery має наступні варіанти, які могли б задовольнити вашу потребу в цьому випадку:

appendвикористовується для додавання елемента в кінці батьківського, divвказаного в селекторі:

$('ul.tabs').append('<li>An element</li>');

prependвикористовується для додавання елемента вгорі / початку батьківського збору, divзазначеного в селекторі:

$('ul.tabs').prepend('<li>An element</li>');

insertAfterдозволяє вставити елемент вибору наступним чином після вказаного елемента. Потім ваш створений елемент буде поміщений у DOM після вказаного тега закриття селектора:

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore зробить протилежне вищесказаному:

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

16

Ви повинні додати контейнер, а не останній елемент:

$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Функція append () , ймовірно, повинна була називатися add () у jQuery, оскільки вона іноді заплутує людей. Ви б могли подумати, що він додає щось після даного елемента, а насправді додає його до елемента.




6
$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Ось деякі відгуки щодо читабельності коду (безсоромний модуль для блогу). http://coderob.wordpress.com/2012/02/02/code-readability

Розгляньте розділення декларації ваших нових елементів від дії додавання їх до UL. Це виглядатиме приблизно так:

var tabSpan = $('<span/>', {
    html: 'Message Center'
});
var messageCenterAnchor = $('<a/>', {
    href='/user/messages',
    html: tabSpan
});
var newListItem = $('<li/>', {
    html: messageCenterAnchor,
    "id": "myIDGoesHere"
});    // NOTE: you have to put quotes around "id" for IE..

$("content ul").append(newListItem);

Щасливе кодування :)


var newListItem = $ ('<li />', {html: messageCenterAnchor}); Як отримати лі і ідентифікатор?
jmogera

@jmogera, ти намагаєшся встановити ідентифікатор? Якщо це так, ви можете просто зробити це всередині {} 's. Я оновив код вище :)
безперечно,

3

Це найкоротший спосіб зробити це

list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);

Де блоки в масиві. і вам потрібно пройти цикл через масив.



Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.