किसी मौजूदा अनियंत्रित सूची में सूची आइटम कैसे जोड़ें?

Question

मेरे पास कोड है जो इस तरह दिखता है:

<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?

Answer 1

यह करना होगा:

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

दो चीज़ें:

• तुम बस जोड़ सकते हैं <li>करने के लिए <ul>ही।
• आपको अपने HTML में जो आप उपयोग कर रहे हैं, उससे विपरीत प्रकार के उद्धरणों का उपयोग करने की आवश्यकता है। इसलिए जब से आप अपनी विशेषताओं में दोहरे उद्धरण चिह्नों का उपयोग कर रहे हैं, कोड को एकल उद्धरणों से घेरें।

Comments

क्या ent # कॉन्टेंट ’की जगह der # हेडर’ नहीं होना चाहिए?

— दीपक

केवल एक साइड नोट के रूप में, आप अपेंडेंड के बजाय प्रीपेंड का उपयोग कर सकते हैं यदि आप अंतिम के बजाय पहले तत्व के रूप में जोड़ना चाहते हैं

— थॉमस

Answer 2

आप इसे अधिक 'ऑब्जेक्ट तरीके' से भी कर सकते हैं और फिर भी आसानी से पढ़ सकते हैं:

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

आपको तब उद्धरणों से लड़ने की ज़रूरत नहीं है, लेकिन ब्रेसिज़ का पता लगाना चाहिए :)

Comments

क्या आपका दृष्टिकोण नए टैग शुरू नहीं करेगा लेकिन उन्हें बंद नहीं करेगा?

— एवर्टन

नहीं, jquery DOM मैनिपुलेशन का उपयोग करके टैग बनाता है, इसलिए इसे केवल यह जानना है कि इसका नाम क्या है

— Danubian Sailor

मुझे यह पसंद है। मुझे स्ट्रिंग्स और उद्धरणों के साथ खिलवाड़ करने से नफरत है :) BTW: अन्य विकल्प stackoverflow.com/a/4673436/112000

— टॉम फेज़र

यह अब तक अधिक बेहतर तरीका है, जो कि अधिक वस्तु-उन्मुख तरीके का उपयोग करना है।

— विल

क्या एक ही समय में बहु को माफी देने के लिए कोई है ??

— तियान्या

Answer 3

"परिशिष्ट" के बजाय "के बाद" का उपयोग कैसे करें।

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

".after ()" मिलान तत्वों के सेट में प्रत्येक तत्व के बाद, पैरामीटर द्वारा निर्दिष्ट सामग्री को सम्मिलित कर सकता है।

Comments

धन्यवाद, इससे मुझे मदद मिली। एक सूची के बीच में सम्मिलित करने के लिए, आपको उपयोग करने की आवश्यकता है beforeया after।

— पैट्रिक फिशर

यह @ Danubian_Sailor के जवाब के साथ संयुक्त मेरे लिए मौके पर हिट

— bkwdesign

Answer 4

यदि आप बस उस में पाठ जोड़ रहे हैं li, तो आप उपयोग कर सकते हैं:

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

Answer 5

jQuery निम्नलिखित विकल्पों के साथ आता है जो इस मामले में आपकी आवश्यकता को पूरा कर सकते हैं:

appenddivचयनकर्ता में निर्दिष्ट मूल के अंत में एक तत्व जोड़ने के लिए उपयोग किया जाता है :

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

prependdivचयनकर्ता में निर्दिष्ट मूल के शीर्ष / प्रारंभ में एक तत्व जोड़ने के लिए उपयोग किया जाता है :

$('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>

Answer 6

आपको कंटेनर में संलग्न होना चाहिए, न कि अंतिम तत्व:

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

संलग्न () समारोह शायद कहा जाता है किया गया है चाहिए ऐड () jQuery में है क्योंकि यह कभी कभी लोगों को confuses। आपको लगता है कि यह दिए गए तत्व के बाद कुछ जोड़ता है, जबकि यह वास्तव में इसे तत्व में जोड़ता है।

Answer 7

के बजाय

$("#header ul li:last")

प्रयत्न

$("#header ul")

Answer 8

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

Answer 9

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

मुबारक कोडिंग :)

Comments

var newListItem = $ ('<li />', {html: messageCenterAnchor}); मैं ली और आईडी कैसे प्राप्त करूं?

— जम्मेरा

@jmogera, क्या आप आईडी सेट करने का प्रयास कर रहे हैं? यदि हां, तो आप {} के अंदर ऐसा कर सकते हैं। मैंने ऊपर दिए गए कोड को अद्यतन किया :)

— undeniablyrob

Answer 10

यह सबसे छोटा तरीका है जो आप कर सकते हैं

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

जहां एक सरणी में ब्लॉक। और आपको सरणी के माध्यम से लूप करने की आवश्यकता है।

Answer 11

यह एक और है

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

Answer 12

आसान

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