У меня есть код, который выглядит так:
<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
?
Это сделало бы это:
$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
Две вещи:
<li>
к самому <ul>
.Вы можете сделать это также более "объектным способом" и все еще легко читаемым:
$('#content ul').append(
$('<li>').append(
$('<a>').attr('href','/user/messages').append(
$('<span>').attr('class', 'tab').append("Message center")
)));
Вам тогда не нужно сражаться с кавычками, но нужно следить за фигурными скобками:)
Как использовать "после" вместо "добавить".
$("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
". after()" может вставлять содержимое, заданное параметром, после каждого элемента в наборе согласованных элементов.
before
или after
.
Если вы просто добавляете текст в li
, вы можете использовать:
$("#ul").append($("<li>").text("Some Text."));
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>
Вы должны добавить в контейнер, а не последний элемент:
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
Функция append() должна, вероятно, быть вызвана add() в jQuery, потому что она иногда путает людей. Вы могли бы подумать, что он добавляет что-то после данного элемента, а на самом деле добавляет к элементу.
Вместо
$("#header ul li:last")
попробовать
$("#header ul")
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
$("#content ul").append('<li><a href="/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);
Счастливое кодирование:)
Это самый короткий способ сделать это
list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);
Где блоки в массиве. и вам нужно пройти через массив.
Легко
// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );
Это еще один
$("#header ul li").last().html('<li> Menu 5 </li>');