বিদ্যমান আনর্ডারড তালিকায় একটি তালিকা আইটেম কীভাবে যুক্ত করবেন?

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>নিজেই।
• আপনি আপনার এইচটিএমএলে যা ব্যবহার করছেন তার তুলনায় আপনার বিপরীত প্রকারের উদ্ধৃতি ব্যবহার করা উচিত। সুতরাং যেহেতু আপনি আপনার বৈশিষ্ট্যে ডাবল উদ্ধৃতি ব্যবহার করছেন, তাই কোডটি একক উদ্ধৃতি দিয়ে ঘিরে।

Comments

এটি কি # # কনটেন্টের পরিবর্তে '# হেডার' হওয়া উচিত নয়?

— দীপক 30'12

পার্শ্ব নোট হিসাবে, আপনি শেষের পরিবর্তে প্রথম উপাদান হিসাবে যুক্ত করতে চান সে ক্ষেত্রে আপনি অ্যাপেন্ডের পরিবর্তে প্রিপেন্ড ব্যবহার করতে পারেন

— টমাস

Answer 2

আপনি এটি আরও 'অবজেক্ট ওয়ে' করে এবং এখনও সহজেই পঠনযোগ্য:

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

আপনাকে তখন উদ্ধৃতি দিয়ে লড়াই করতে হবে না, তবে অবশ্যই ধনুর্বন্ধনীগুলির সন্ধান রাখতে হবে :)

Comments

আপনার পদ্ধতির নতুন ট্যাগ শুরু করা কিন্তু বন্ধ না?

— এভারটন

না, jquery DOM ম্যানিপুলেশন ব্যবহার করে ট্যাগ তৈরি করে, তাই এটির নামটি কেবল এটি জানতে হবে

— ড্যানুবিয়ান নাবিক

আমি এটা ভালোবাসি. আমি স্ট্রিং এবং কোটগুলির সাথে

— জগাখিচুড়ি

এটি আরও বেশি পছন্দনীয় উপায়, এটি হ'ল আরও অবজেক্ট-ভিত্তিক পদ্ধতিতে ব্যবহার করা।

— উইল

একই সাথে মাল্টি অ্যাপেন্ড করার কি কি আছে ??

— tyan

Answer 3

"সংযুক্তি" পরিবর্তে "পরে" ব্যবহার সম্পর্কে কীভাবে।

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

".'এর পরে ()" ম্যাচিং উপাদানগুলির সেটের প্রতিটি উপাদানের পরে প্যারামিটার দ্বারা নির্দিষ্ট কন্টেন্ট সন্নিবেশ করতে পারে।

Comments

আপনাকে ধন্যবাদ, এটি আমাকে সাহায্য করেছিল। একটি তালিকার মাঝখানে সন্নিবেশ করতে আপনার ব্যবহার করতে হবে beforeবা after।

— প্যাট্রিক ফিশার

এটি @

— ডানুবিয়ান_সেলারের

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আপনার নির্দিষ্ট উপাদানগুলির পরে আপনি নির্দিষ্ট করার পরে আপনাকে নিজের নির্বাচনের একটি উপাদান প্রবেশ করতে দেয়। আপনার নির্বাচিত উপাদানটি নির্দিষ্ট নির্বাচক সমাপনী ট্যাগের পরে ডিওমে রাখা হবে:

$('<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 মধ্যে কারণ এটি কখনও কখনও মানুষ বিভ্রান্ত। আপনি ভাববেন যে এটি প্রদত্ত উপাদানটির পরে এটি কিছু সংযোজন করেছে , যখন এটি আসলে এটি উপাদানকে যুক্ত করে।

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

আপনার নতুন উপাদানগুলিকে আপনার ইউএল-এ যুক্ত করার ক্রিয়া থেকে পৃথক করার বিষয়টি বিবেচনা করুন .. এটি দেখতে এরকম কিছু হবে:

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: messageCenterAunchor enter); আমি কীভাবে লি এবং আইডি পাব?

— 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>" );