วิธีเพิ่มรายการในรายการที่ไม่มีการเรียงลำดับที่มีอยู่

ฉันมีรหัสที่มีลักษณะเช่นนี้:

<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="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

สองสิ่ง:

• คุณก็สามารถผนวก<li>กับ<ul>ตัวเอง
• คุณต้องใช้เครื่องหมายคำพูดประเภทตรงข้ามกับสิ่งที่คุณใช้ใน HTML ของคุณ ดังนั้นเมื่อคุณใช้เครื่องหมายคำพูดคู่ในแอตทริบิวต์ของคุณให้ล้อมรอบโค้ดด้วยเครื่องหมายคำพูดเดี่ยว

คุณสามารถทำได้ใน 'ทางวัตถุ' และยังอ่านง่าย:

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

คุณไม่ต้องต่อสู้กับคำพูดในตอนนั้น แต่ต้องเก็บเครื่องหมายวงเล็บไว้ :)

วิธีการเกี่ยวกับการใช้ "after" แทน "ผนวก"

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

".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="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

ผนวก ()ฟังก์ชั่นควรจะได้รับอาจเรียกว่าเพิ่ม ()ใน jQuery เพราะบางครั้งมันก็สร้างความสับสนให้ผู้คน คุณจะคิดว่ามันจะผนวกบางสิ่งหลังจากองค์ประกอบที่กำหนดในขณะที่มันเพิ่มเข้าไปในองค์ประกอบจริง

แทน

$("#header ul li:last")

ลอง

$("#header ul")

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

$("#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);

Happy coding :)

นี่เป็นวิธีที่สั้นที่สุดที่คุณสามารถทำได้

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

ที่บล็อกในอาร์เรย์ และคุณต้องวนลูปผ่านอาร์เรย์

นี่คืออีกหนึ่ง

$("#header ul li").last().html('<li> Menu 5 </li>');

ง่าย

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );