"এটি" এর jQuery প্রথম সন্তান

Question

আমি ক্লিক করা স্প্যান থেকে একটি jQuery ফাংশনে "এটি" দেওয়ার চেষ্টা করছি যা তখন ক্লিক করা উপাদানটির প্রথম সন্তানের উপর jQuery চালাতে পারে। ঠিক আছে বলে মনে হচ্ছে না ...

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

javascript:

function toggleSection(element) {
  element.toggleClass("redClass");
}

আমি কীভাবে রেফারেন্স করব: মৌলের প্রথম সন্তানের?

Comments

আপনি যদি jQuery ব্যবহার করছেন তবে আপনি jQuery ব্যবহার করে ইভেন্ট হ্যান্ডলারদের কেন আবদ্ধ করবেন না?

— ভিভিন পালিথ

কারণ বাইন্ড ইভেন্ট হ্যান্ডলারগুলি ডকুমেন্টে প্রস্তুত করতে হবে ready প্রস্তুতি () যা একটি পারফরম্যান্স হিট যুক্ত করে (এটি আইআই 6 এর জন্য একটি অ্যাপ্লিকেশন)। অথবা অন্য উপায় আছে কি?

— macca1

হুম .. নিশ্চিত না JQuery ব্যবহার করে বাঁধাই হ'ল মানক উপায় (যদি আপনি ইতিমধ্যে jQuery ব্যবহার করছেন)। আপনি যখন ব্যবহার করেন তখন আপনি কোন ধরণের পারফরম্যান্স হিট করছেন jQuery(document).ready(...)?

— ভিভিন পালিথ

এটি 7+ বিকাশকারীদের সাথে একটি বড় অ্যাপ্লিকেশন। আমি এটি কিছুটা পরিষ্কার করার চেষ্টা করার আগে এটি মূলত 4+ সেকেন্ড ছিল। সুতরাং আমি এর চেয়ে আরও যুক্ত করা এড়াতে চাই :)

— macca1

Answer 1

আপনি যদি কোনও বিদ্যমান জিকুয়েরি সেট দ্বারা সরবরাহিত প্রসঙ্গে কোনও নির্বাচককে প্রয়োগ করতে চান তবে সন্ধান () ফাংশনটি চেষ্টা করুন :

element.find(">:first-child").toggleClass("redClass");

জর্ন শো-রোড উল্লেখ করেছেন যে আপনি সম্ভবত প্রসঙ্গ উপাদানটির প্রথম সরাসরি বংশধরকে খুঁজতে চান , তাই শিশু নির্বাচনকারী (>)। তিনি আরও উল্লেখ করেছেন যে আপনি বাচ্চাদের () ফাংশনটিও ঠিক একইভাবে ব্যবহার করতে পারেন যা সন্ধানের সাথে খুব মিল () তবে কেবল স্তরক্রমের নীচে কেবল একটি স্তর অনুসন্ধান করে (যা আপনার যা প্রয়োজন তা কেবল ...):

element.children(":first").toggleClass("redClass");

Comments

ধন্যবাদ! পুরোপুরি কাজ করে। আমি ভাবছি নীচে তালিকাভুক্ত অন্যান্য উপায়গুলিও কাজ করবে।

— macca1

আমি বিশ্বাস করি যে find()সমস্ত বংশধরকে অনুসন্ধান করবে এবং :first-childপিতা-মাতার প্রতি একটি উপাদানের সাথে মেলে। অতএব, এই কোয়েরিতে বেশ কয়েকটি উপাদান ফেরত আসতে পারে। নাকি আমি ভুল করছি?

— জার্ন শো-রোড

আমি জানি এটি একটি পুরানো প্রশ্ন / উত্তর, তবে সেই নির্বাচকের পিতা-মাতা ছাড়াই ">" নির্বাচকের ব্যবহার jQuery 1.8 হিসাবে অবমাননিত (উদাহরণস্বরূপ, ">: ফার্স্টচাইল্ড") is আমি পরিবর্তে element.children(":first-child")বাelement.children().first();

— কেভিন বি

@ কেভিনবি স্পষ্টতই তারা সিদ্ধান্ত নিয়েছে যে এটি সর্বোপরি হ্রাস করবেন না

— অ্যালনিটাক

সর্বোত্তম পন্থাটি সমস্ত আইটেমগুলিতে পুনরাবৃত্তি করা এবং তারপরে প্রথমটিকে বাছাই করা নয়, যেমন কিছু এখানে প্রস্তাবিত রয়েছে। এটি খারাপ হবে।

— vsync

Answer 2

এর একক প্রথম সন্তানের পেতে নির্বাচকটির সাথে childrenফাংশনটি ব্যবহার করুন ::firstelement

element.children(":first").toggleClass("redClass");

Comments

element.children () [0] .toggleClass ( "redClass");

— জাকোস

@ জাকোস:TypeError: Object [object HTMLAnchorElement] has no method 'toggleClass'

— -রোড

Answer 3

প্রথম সন্তানের প্রাপ্তির জন্য বিভিন্ন পদ্ধতির গতির পার্থক্য দেখতে আমি jsperf পরীক্ষা যুক্ত করেছি (মোট 1000+ শিশু)

দেওয়া notif = $('#foo')

jQuery উপায়:

1. $(":first-child", notif) - 4,304 অপস / সেকেন্ড - দ্রুততম
2. notif.children(":first") - 653 অপস / সেকেন্ড - 85% ধীর
3. notif.children()[0] - 1,416 অপস / সেকেন্ড - 67% ধীর

নেটিভ উপায়:

4. জাভাস্ক্রিপ্ট নেটিভ ' ele.firstChild- 4,934,323 অপস / সেকেন্ড (উপরের সমস্ত পদ্ধতির তুলনায় 100% ধীরfirstChild )
5. জিকিউরি থেকে নেটিভ ডোম এলে: notif[0].firstChild- 4,913,658 অপস / সেকেন্ড

সুতরাং, প্রথম 3 jQuery পদ্ধতির প্রস্তাব দেওয়া হয় না, কমপক্ষে প্রথম সন্তানের জন্য (আমি সন্দেহ করি যে এটি অন্যান্য অনেকের ক্ষেত্রেও হবে)। যদি আপনার কাছে jQuery অবজেক্ট থাকে এবং প্রথম সন্তান পাওয়া দরকার, তবে অ্যারে রেফারেন্স (প্রস্তাবিত) ব্যবহার করে jQuery অবজেক্ট থেকে নেটিভ DOM উপাদানটি পান বা ব্যবহার করুন । এটি নিয়মিত জাভাস্ক্রিপ্ট ব্যবহারের মতো একই ফলাফল দেয়।[0] .get(0)ele.firstChild

সমস্ত পরীক্ষাগুলি ক্রোম ক্যানারি বিল্ড v15.0.854.0 এ সম্পন্ন হয়

Comments

আসলে, firstChildjQuery এর children()বা নির্বাচক কোয়েরির মতো ফলাফল দেয় না । firstChildপাঠ্য নোডগুলি অন্তর্ভুক্ত করবে যা খুব কমই কাঙ্ক্ষিত। jQuery এর মধ্যে contents()ফাংশন হবে তাদের মধ্যে রয়েছে, তবে children()করবে না। নতুন ব্রাউজারগুলি সমর্থন করে firstElementChildযা প্রথম সন্তানের উপাদানটি দেবে, তবে আইই <9 এটি সমর্থন করে না। সুতরাং, আপনি যদি ব্যবহার করেন তবে আপনাকে firstChildম্যানুয়ালি প্রথম নন-টেক্সট নোডের শিশুটি খুঁজে পেতে হবে।

— সর্বোচ্চ

$(":first-child", notif)$(":first", notif)প্রত্যাশিত আচরণের জন্য হওয়া উচিত । প্রাক্তন সমস্ত প্রথম শিশু উপাদান বংশধরদের ফিরিয়ে দেবে।

— ড্রাজেন বিজোলোভুক

Answer 4

element.children().first();

সমস্ত বাচ্চাদের সন্ধান করুন এবং তাদের মধ্যে প্রথম পান।

Comments

এখন পর্যন্ত সবচেয়ে সহজ পদ্ধতি এবং এর চেয়ে আরও দক্ষ .children(':first')।

— গ্রাস ডাবল

কীভাবে এটি আরও দক্ষ? দেখে মনে হচ্ছে এটি সমস্ত বাচ্চা হয়, তারপরে প্রথমটি নেয়, কেবল প্রথম সন্তানের প্রাপ্তির তুলনায়।

— অ্যান্টনি ম্যাকগ্রা

Answer 5

আপনি চেষ্টা করেছেন?

$(":first-child", element).toggleClass("redClass");

আমি মনে করি আপনি আপনার অনুসন্ধানের জন্য একটি প্রসঙ্গ হিসাবে আপনার উপাদান সেট করতে চান। এটি করার আরও ভাল উপায় হতে পারে যা অন্য কোনও জিক্যুরি গুরু এখানে আশাবাদী আপনাকে দেখিয়ে দেবে :)

Comments

elementগ্র্যান্ড-বাচ্চা হলে এটি ব্যর্থ হবে

— Alnitak

Answer 6

আমি সবেমাত্র একটি প্লাগইন লিখেছি যা .firstElementChildসম্ভব হলে ব্যবহার করে এবং প্রয়োজনে প্রতিটি পৃথক নোডের উপরে পুনরায় পুনঃব্যবহার করতে ফিরে যায়:

(function ($) {
    var useElementChild = ('firstElementChild' in document.createElement('div'));

    $.fn.firstChild = function () {
        return this.map(function() {
            if (useElementChild) {
                return this.firstElementChild;
            } else {
                var node = this.firstChild;
                while (node) {
                    if (node.type === 1) {
                        break;
                    }
                    node = node.nextSibling;
                }
                return node;
            }
        });
    };
})(jQuery);

এটি খাঁটি ডিওএম সমাধানের মতো তত দ্রুত নয়, তবে ক্রোম 24 এর অধীনে জেএসপিআইপি পরীক্ষায় এটি অন্য কোনও জিকুয়েরি সিলেক্টর-ভিত্তিক পদ্ধতির চেয়ে দ্রুততার মাত্রার কয়েকটি ছিল।

Comments

আমি এই প্লাগইনটি পছন্দ করি - তবে এখানে 2 টি সমস্যা রয়েছে: 1) প্লাগইন স্ক্রিপ্টটি মাথার মধ্যে অন্তর্ভুক্ত করা যায় document.bodyনা কারণ এখনও আরম্ভ করা হয়নি, 2) শিশু নোডের সংখ্যা খুব বেশি হলে বিকল্পগুলির চেয়ে পারফরম্যান্সটি আরও ভাল। কেবলমাত্র কয়েকটি বাচ্চার জন্য (10 এর চেয়ে কম বলুন) $('>:first-child',context)খানিকটা দ্রুত। শুধুমাত্র বাচ্চাদের সংখ্যা কার্যকারিতা প্রভাবিত করে, গভীরতা নয়।

— কোডফ্যাক্টর

@ কোডেফেক্টর সম্পর্কে ভাল পয়েন্ট document.body- আমি এটি সন্ধান করব।

— Alnitak

Answer 7

আপনি ডোম ব্যবহার করতে পারেন

$(this).children().first()
// is equivalent to
$(this.firstChild)

Answer 8

এটি এর মতো সরল যাদু দ্বারা করা যেতে পারে:

$(":first-child", element).toggleClass("redClass");

তথ্যসূত্র: http://www.snoopcode.com/jquery/jquery-first-child-selector

Answer 9

দয়া করে এটি প্রথম জিনিসটির মতো ব্যবহার করুন যেমন "মাইপ" এর মতো ট্যাগ ট্যাগ করার জন্য একটি শ্রেণীর নাম দিন

তারপরে নিম্নলিখিত কোডটি ব্যবহার করুন

$(document).ready(function() {
    $(".myp").click(function() {
        $(this).children(":first").toggleClass("classname"); // this will access the span.
    })
})

Answer 10

আপনি যদি তাত্ক্ষণিক প্রথম শিশু চান তবে আপনার প্রয়োজন

    $(element).first();

আপনি যদি নিজের উপাদান থেকে ডোমে কোনও নির্দিষ্ট প্রথম উপাদান চান তবে নীচে ব্যবহার করুন

    var spanElement = $(elementId).find(".redClass :first");
    $(spanElement).addClass("yourClassHere");

চেষ্টা করে দেখুন: http://jsfiddle.net/vgGbc/2/

Comments

এটি ঠিক ভুল - যদি element কোনও ডিওএম নোড হয় তবে $(element).first()এটি $(element)তার প্রথম সন্তানের নয়।

— Alnitak

সম্মত হয়েছে, যদি উপাদানটি কোনও ডিওএম নোড element (উপাদান) হয় fi (উপাদান) সমান $ (উপাদান) এটি আমাকে

— নকআউটজেএস