Jak dodać istniejącą?
Mam kod, który wygląda tak:
<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>
Chciałbym użyć jQuery, aby dodać następujące elementy do listy:
<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>
Próbowałem tego:
$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");
Ale To dodaje nowy li
wewnątrz ostatniego li
(tuż przed zamykającym znacznikiem), nie po nim. Jaki jest najlepszy sposób na dodanie tego li
?
12 answers
To by wystarczyło:
$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
Dwie rzeczy:
- możesz po prostu dołączyć {[1] } do samego
<ul>
. - musisz użyć cudzysłowu przeciwnego niż to, czego używasz w HTML. Ponieważ używasz podwójnych cudzysłowów w swoich atrybutach, otocz kod pojedynczymi cudzysłowami.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-02 21:36:54
Możesz to zrobić również w bardziej "obiektowy sposób" i nadal łatwy do odczytania:
$('#content ul').append(
$('<li>').append(
$('<a>').attr('href','/user/messages').append(
$('<span>').attr('class', 'tab').append("Message center")
)));
Nie musisz wtedy walczyć z cudzysłowami, ale musisz zachować ślady szelek:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-09 09:33:25
Może użyjesz "after" zamiast "append".
$("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
".after () " może wstawić zawartość określoną przez parametr po każdym elemencie w zestawie dopasowanych elementów.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-18 07:06:41
Jeśli po prostu dodajesz tekst w li
, możesz użyć:
$("#ul").append($("<li>").text("Some Text."));
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-25 16:59:53
JQuery oferuje następujące opcje, które mogą spełnić twoje potrzeby w tym przypadku:
append
jest używany do dodania elementu na końcu rodzica div
określonego w selektorze:
$('ul.tabs').append('<li>An element</li>');
prepend
jest używany do dodania elementu na górze / początku rodzica div
określonego w selektorze:
$('ul.tabs').prepend('<li>An element</li>');
insertAfter
pozwala wstawić element zaznaczenia następny po elemencie, który określisz. Utworzony element zostanie następnie umieszczony w DOM po określonym selektorze zamykanie tagów:
$('<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
zrobi przeciwieństwo powyższego:
$('<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-17 14:15:00
Należy dodać do kontenera, a nie ostatni element:
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
Append () funkcja powinna być prawdopodobnie wywołana add () w jQuery, ponieważ czasami myli ludzi. Można by pomyśleć, że dodaje coś po podanym elemencie, podczas gdy w rzeczywistości dodaje to do elementu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-21 20:51:04
Zamiast
$("#header ul li:last")
Try
$("#header ul")
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-17 19:32:21
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-17 19:31:29
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
Oto kilka uwag dotyczących czytelności kodu (bezwstydna wtyczka dla bloga). http://coderob.wordpress.com/2012/02/02/code-readability
Rozważ oddzielenie deklaracji nowych elementów od akcji dodawania ich do UL.. Wyglądałoby to mniej więcej tak:
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);
Happy coding:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-08 18:41:17
This is another one
$("#header ul li").last().html('<li> Menu 5 </li>');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-30 12:49:37
Easy
// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-21 09:19:00
To najkrótsza droga, jaką możesz to zrobić
list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);
Gdzie bloki w tablicy. i musisz przejść przez tablicę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-25 03:24:51