আমি কীভাবে jQuery এর কোনও এলিমেন্টের n-th স্তরের পিতামাতাকে পেতে পারি?

Question

যখন আমি পেতে চাই, উদাহরণস্বরূপ, উপাদানগুলির তৃতীয় স্তরের পিতামাতাকে অবশ্যই লিখতে হবে এর $('#element').parent().parent().parent()জন্য আরও কি কোনও সর্বোত্তম পদ্ধতি আছে?

Comments

আমি শুধু নম্বর (শ্রেনী) দিতে এবং উপাদান পেতে, কারণ আমার উপাদান কোনো calss আইডি বা নাম নাও থাকতে পারে চান

— মধ্যে Artur Keyan

আপনি যদি এই কার্যকারিতাটি পুনরায় ব্যবহার করার পরিকল্পনা করেন তবে অনুকূল সমাধানটি হ'ল একটি jQuery প্লাগইন তৈরি করা।

— zzzzBov

কিছু পারফরম্যান্স তুলনার জন্য jsperf.com/jquery-get-3rd-level- বাবা দেখুন

— a'r

আর একটি ভাল সরঞ্জাম হ'ল ".ক্লসোস্ট ()" ফাংশন। '(' li.item ')। নিকটতম (' ডিভ ') আপনাকে ডিআইভি দেবে যা লি'ইটিমের নিকটতম পূর্বপুরুষ। আপনি যখন উপাদানটি কত স্তর পর্যন্ত জানেন না তার পক্ষে ভাল তবে আপনি এর ট্যাগনাম / শ্রেণি / অন্য কিছু জানেন।

— গ্রাহাম

Answer 1

যেহেতু পিতা-মাতা () পূর্বপুরুষের উপাদানগুলি বাইরের দিকের নিকটতম থেকে অর্ডার করা হয়, আপনি এটিকে () -এ চেইন করতে পারেন :

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

Comments

আমি কি এই $ ('# উপাদান') ব্যবহার করতে পারি? পিতা-মাতা () [2]? অথবা এটি অবশ্যই এক (2) দিয়ে হবে

— আর্তুর কেয়ান

এটি একাধিক উপাদান নির্বাচনের জন্য কাজ করবে না, একটি নিরাপদ উপায় $('.element').first().parents().eq(num);

— হ'ল

আর্থার, ব্যবহার [2]করে অন্তর্নিহিত ডিওএম উপাদানটি ফিরিয়ে দেবে, ব্যবহার করে কোনও জিকুয়েরি eq(2)বস্তু ফিরে আসবে।

— ফ্রিডরিক হামিদি

@zzzzBov, খুব সত্য, তবে প্রশ্নকারীর ক্ষেত্রে কেবলমাত্র একটি উপাদান নির্বাচিত হবে (কারণ তিনি একটি আইডির সাথে মেলে)।

— ফ্রিডরিক হামিদি

আপনি যদি একটি আইডি "# এলিমেন্ট" তে সন্ধান করেন তবে এটি কেবলমাত্র কোনও একক উপাদানকে ফেরত দিতে পারে যেমন আইডি লুকআপগুলি কাজ করে, তারা ডোমের সেই আইডি সহ প্রথম উপাদানটি ফেরত দেয়। অন্যদিকে আপনি যদি "বিভাগ # উপাদান" বা কোনও শ্রেণি নির্বাচক করেন তবে আপনি সঠিক হবেন।

— হেনরি

Answer 2

আপনার প্রয়োজনগুলির উপর নির্ভর করে, যদি আপনি জানেন যে আপনার কী পিতামাতার সন্ধান করছেন আপনি .parents () নির্বাচকটি ব্যবহার করতে পারেন।

ইজি: http://jsfiddle.net/ হেনরিগারেল / কিপ 5 জি / 2 /

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

সূচক ব্যবহার করে উদাহরণ:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());

Comments

আমি এখন এইভাবে, তবে আমি স্তরটি দিতে চাই

— আর্তুর কেয়ান

উত্তর আরও পড়ুন এবং সমস্ত প্রকাশিত হবে! (আমি আপনাকে স্তরের উদাহরণ দিয়েছি)

— হেনরি

এটি অন্যান্য সকল ধরণের নির্বাচকদের জন্য দুর্দান্তভাবে কাজ করে। উদাহরণস্বরূপ, আপনি যদি একটি নির্দিষ্ট শ্রেণীর সমস্ত পিতা বা মাতার পিতামাতার তালিকা চান তবে এটি তাদের ফিরিয়ে দেবে।

— darksky

Answer 3

আপনি লক্ষ্য পিতামাতাকে একটি আইডি বা শ্রেণি দিতে পারেন (উদাহরণস্বরূপ মাইপ্যারেন্ট) এবং রেফারেন্সটি সহ $('#element').parents(".myParent")

Comments

আমি শুধু নম্বর দিতে এবং উপাদান পেতে, কারণ আমার উপাদান কোনো calss আইডি বা নাম নাও থাকতে পারে চান

— মধ্যে Artur Keyan

Answer 4

একটি দ্রুত উপায় হ'ল সরাসরি জাভাস্ক্রিপ্ট ব্যবহার করা, যেমন।

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

এটি আমার ব্রাউজারে জিকুয়েরি .parent()কলগুলির শৃঙ্খলার চেয়ে উল্লেখযোগ্যভাবে দ্রুত চলে runs

দেখুন: http://jsperf.com/jquery-get-3rd-level-parent

Comments

"উল্লেখযোগ্যভাবে দ্রুত" দ্বারা, আমরা গতির পার্থক্যের পরিপ্রেক্ষিতে (ক্রোম 51 এ জিকুয়েরি 1.10.1 চালিয়ে যাচ্ছি) এর পরিপ্রেক্ষিতে প্রস্থের ক্রমটির সন্ধান করছি। আপনি গতির জন্য যদি টিউন করছেন তবে অবশ্যই কার্যকরভাবে কার্যকর করা হচ্ছে।

— আয়ান ফ্রেজার

Answer 5

কোনও উত্তর ব্যবহার করে খুঁজে পেল না closest() এবং আমি মনে করি এটি প্রয়োজনীয়তম উত্তর যখন আপনি প্রয়োজনীয় উপাদানটি কত স্তরের জানেন না তাই একটি উত্তর পোস্ট করে:
আপনি closest()নির্বাচকদের সাথে মিলিত প্রথম উপাদানটি মিলিয়ে ফাংশনটি ব্যবহার করতে পারেন উপাদান থেকে উপরের দিকে ট্র্যাশিংয়ের সময়:

('#element').closest('div')    // returns the innermost 'div' in its parents
('#element').closest('.container')    // returns innermost element with 'container' class among parents
('#element').closest('#foo')    // returns the closest parent with id 'foo'

Answer 6

ইহা সহজ. শুধু ব্যবহার

$(selector).parents().eq(0); 

যেখানে 0 হল প্যারেন্ট স্তর (0 পিতা বা মাতা, 1 পিতামাতার পিতা ইত্যাদি)

Answer 7

এইভাবে কেবল :eq()নির্বাচক যুক্ত করুন :

$("#element").parents(":eq(2)")

আপনি কেবল কোন পিতামাতাকে সূচক নির্দিষ্ট করেছেন: তাত্ক্ষণিক পিতামাতার জন্য 0, গ্র্যান্ড-পিতামাতার জন্য 1, ...

Comments

এই উপায়টি হ'ল কাজটি সর্বাধিক দ্রুত করা। এটি প্রমাণ করার জন্য এখানে মাপদণ্ড রয়েছে: jsperf.com/jquery-get-element-s-nth-parent

— java-

Answer 8

যদি আপনি এই কার্যকারিতাটি পুনঃব্যবহার করার পরিকল্পনা করেন তবে অনুকূল সমাধানটি হ'ল jQuery প্লাগইন তৈরি করা:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

অবশ্যই, আপনি একটি selectচ্ছিক নির্বাচক এবং এই জাতীয় অন্যান্য বিষয়গুলির অনুমতি দেওয়ার জন্য এটি বাড়িয়ে দিতে চাইতে পারেন।

একটি নোট: এটি 0পিতামাতার জন্য একটি ভিত্তিক সূচক ব্যবহার করে, তাই nthParent(0)কল করার মতো parent()। যদি আপনার পরিবর্তে 1ভিত্তিক সূচক থাকে তবে ব্যবহার করুনn-- > 0

Comments

আমি মনে করি আপনি এই অংশটি দ্রুত খুঁজে পাবেন: var p = 1 + n; while (p--) { $p = $p.parent(); }এবং আপনি যদি 1 ভিত্তিতে পরিবর্তন করতে চান তবে জাভাস্ক্রিপ্টটি "মিথ্যা" হিসাবে আপনি ব্যবহার করতে পারেন: while (n--) { $p = $p.parent();} একটি শর্তাধীন চেক সংরক্ষণ করুন

— মার্ক শুলথিস

@ মার্ক শুলথিস, এটি কেবল গতিই নয়, এটি নির্ভরযোগ্যতাও about যদি কেউ অজ্ঞতাবশত কল করে তবে আপনার ফাংশনটির কী হবে nthParent(-2)? আপনার উদাহরণটি নষ্ট হয়ে গেছে।

— zzzzBov

বা সবেমাত্র ফিরে যান(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));

— মার্ক শুলথিস

@ মার্ক শুলথিস, আবার নির্ভরযোগ্যতা। আমার ফাংশনটি নির্বাচনের প্রতিটি উপাদানটির জন্য নবম পিতাকে ফেরত দেয় , আপনার ফাংশনটি তালিকার নবম উপাদানটি দেয় parentsযা একাধিক উপাদান সহ নির্বাচনের ক্ষেত্রে ভুল হবে।

— zzzzBov

-2 সম্পর্কিত সত্য, এবং আপনার উদাহরণ হিসাবে var p = n >? (1 + n):1; পরিবর্তে ব্যবহার করে "কিছুই না" বরং সেই ক্ষেত্রে প্রথম পিতামাতাকে ফিরে আসবে - বা যেখানে এটি আমার উদাহরণে লুপটি ভেঙে দেয়। হ্যাঁ, এটি সম্ভবত হওয়া উচিত: (function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery)); আপনি যদি কিছু ফিরিয়ে দিতে না চান তবে।

— মার্ক শুলথিস

Answer 9

আপনার যদি একটি সাধারণ পিতামাতার ডিভি থাকে তবে আপনি পিতা-মাতার ব্যবহার () লিঙ্কটি ব্যবহার করতে পারেন

উদাহরণ: $('#element').parentsUntil('.commonClass')

সুবিধা হ'ল এই উপাদান এবং সাধারণ পিতামাতার (কমনক্লাস দ্বারা সংজ্ঞায়িত) মধ্যে কত প্রজন্ম রয়েছে তা আপনার মনে করার দরকার নেই।

Answer 10

আপনি এটি ব্যবহার করতে পারেন:

$(this).ancestors().eq(n) 

উদা: $(this).ancestors().eq(2)-> এর পিতামাতার পিতা this।

Answer 11

আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

Comments

ডাউনভোটার নয়, এটি সম্ভবত এখানে সবচেয়ে খারাপ সমাধান (অর্থাত্ অদক্ষ)।

— জাতাতাত্তা

Answer 12

EQ ব্যবহার করে গতিশীল ডিওএম দখল করতে দেখা যায় p

আমি উভয়কে এমন একটি উপাদানটিতে ব্যবহার করি যা ক্লাসগুলি অনমোভারওভারে এটি প্রয়োগ করে। eq ক্লাসগুলি দেখায় যখন পিতামাতা ()। পিতামাতা () না করে।

Answer 13

যেহেতু পিতামাতা () কোনও তালিকা ফেরত দেয়, এটিও কার্যকর হয়

$('#element').parents()[3];