$ (এই) নির্বাচকের বাচ্চাদের কীভাবে পাবেন?


2229

আমার এর মতো লেআউট রয়েছে:

<div id="..."><img src="..."></div>

এবং ক্লিকের imgভিতরে থাকা বাচ্চাকে বাছাই করতে কোনও jQuery নির্বাচক ব্যবহার করতে চান div

পেতে div, আমি এই নির্বাচক পেয়েছি:

$(this)

আমি কীভাবে imgএকটি নির্বাচক ব্যবহার করে শিশুকে পেতে পারি ?

উত্তর:


2854

JQuery কনস্ট্রাক্টর নামে পরিচিত একটি 2 য় প্যারামিটার গ্রহণ করে contextযা নির্বাচনের প্রসঙ্গে ওভাররাইড করতে ব্যবহার করা যেতে পারে।

jQuery("img", this);

এটি এর মতো ব্যবহারের .find()মতো যা একই :

jQuery(this).find("img");

আপনি যে ইমগগুলি চান তা যদি কেবল ক্লিক করা উপাদানের সরাসরি বংশধর হয় তবে আপনি এটি ব্যবহার করতে পারেন .children():

jQuery(this).children("img");

575
এটির মূল্যের জন্য কী: jQuery ("img", এটি) অভ্যন্তরীণভাবে রূপান্তরিত হয়েছে: jQuery (এটি) f :)
পল আইরিশ

24
ধন্যবাদ @ পল, আমি উদ্বিগ্ন ছিলাম যে সন্ধানটি () ব্যবহার করা ভুল ছিল , এটিই একমাত্র উপায়;)
Agos

5
নোড যদি সরাসরি শিশু হয় তবে কেবলমাত্র do (এটি)। শিশুরা ('img') করা খুব দ্রুত হবে না; ?
অ্যাডামায়ঙ্ক

11
@ অ্যাডামায়ঙ্ক বাস্তবে না, কমপক্ষে হলেও এটির কিছু নেই: jsperf.com/jquery-children-vs-find/3
সাইমন

3
@ পলরিশ এই উদাহরণে যা বলেছিলেন তার ঠিক বিপরীতটি আমি দেখতে পাচ্ছি - jsppha.com/jquery-selectors-compistance-a । কেউ কি কিছু আলোকপাত করতে পারে? হয় আমি টেস্ট-কেস ভুল পেয়েছি, বা জ্যাকোরি গত 4 বছরে এই অপ্টিমাইজেশনটি পরিবর্তন করেছে।
জোনাথন ভানাসকো

471

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

$(this).find('img');

যা all imgশ্বরের বংশধর সকলকে ফিরিয়ে দেবেdiv


সাধারণ ক্ষেত্রে, মনে হয় এটি $(this).children('img')আরও ভাল হবে। উদাহরণস্বরূপ <div><img src="..." /><div><img src="..." /></div></div>কারণ সম্ভবত ব্যবহারকারী 1 ম স্তরের ইমগগুলি সন্ধান করতে চান।
বাটল বাটকস

137

আপনার যদি প্রথমটি পেতে হয় তবে এটি imgএক স্তরের নীচে ঠিক আছে, আপনি এটি করতে পারেন

$(this).children("img:first")

6
না :firstকেবল "মেলে ঠিক এক স্তর নিচে ", বা এটি মেলে না "প্রথম" যে পাওয়া যায়নি? img
ইয়ান বয়ড

3
@ ইয়ানবয়েড, .children()এখান থেকেই "নীচে ঠিক এক স্তর" এসেছে এবং :firstসেখানেই "প্রথম" এসেছে।
টাইলার ক্রম্পটন

3
@ ইয়ানবয়েড, এই উপাদানটির জন্য অ্যাকাউন্টহীন হবে। এটা শুধুমাত্র প্রয়োগ করবে আপনি ব্যবহার .find()পরিবর্তে.children()
টিলার Crompton

2
আপনি যদি ব্যবহার করছেন: প্রথমে একটি .ফাইন্ড () দিয়ে সাবধান হন, jQuery মনে হয় সমস্ত বংশধরকে খুঁজে বের করবে এবং তারপরে প্রথম উপাদানটি ফিরিয়ে দেবে, কখনও কখনও খুব ব্যয়বহুল
ক্লারেন্স লিউ

1
@ButtleButkus প্রশ্ন সালে thisএকটি রেফারেন্স ইতিমধ্যে ছিল <div>ধারণকারী <img>অবশ্য যদি তোমরা রেফারেন্স আপনি স্পষ্টভাবে পারা স্পষ্টভাবে রচনা একটির বেশি তারপর ছিল থেকে তর্ক করতে ট্যাগের একাধিক মাত্রার children()কল
rakslice

76

যদি আপনার ডিআইভি ট্যাগটি অবিলম্বে আইএমজি ট্যাগ অনুসরণ করে তবে আপনি এটি ব্যবহার করতে পারেন:

$(this).next();

16
.next () সত্যিই ভঙ্গুর, আপনি যদি সর্বদা উপাদানটিকে পরবর্তী উপাদান হিসাবে গ্যারান্টি দিতে না পারেন তবে আলাদা পদ্ধতি ব্যবহার করা ভাল। এই ক্ষেত্রে, আইএমজি ডিভের বংশধর, ভাইবোনের নয় ib
লোকালপিসিগুই

ওপি স্পষ্টতই ডিভের অভ্যন্তরে কোনও সন্তানের ইমগের জন্য জিজ্ঞাসা করেছিল।
জর্জিও টেম্পেস্তা


41

আপনি নীচের মতো পিতামহী বিভাগের সমস্ত img উপাদান খুঁজে পেতে পারেন

$(this).find('img') or $(this).children('img')

আপনি যদি নির্দিষ্ট আইএমজি উপাদান চান তবে আপনি এটি লিখতে পারেন write

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

আপনার ডিভিতে কেবলমাত্র একটি আইএমজি উপাদান রয়েছে। সুতরাং এই জন্য নীচে সঠিক

 $(this).find("img").attr("alt")
                  OR
  $(this).children("img").attr("alt")

তবে আপনার ডিভিতে যদি নীচের মতো আরও আইএমজি উপাদান থাকে

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

তারপরে আপনি দ্বিতীয় img উপাদানটির Alt মান খুঁজে পেতে উচ্চতর কোড ব্যবহার করতে পারবেন না। সুতরাং আপনি এটি চেষ্টা করতে পারেন:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

এই উদাহরণটি একটি সাধারণ ধারণা দেখায় যে আপনি কীভাবে প্যারেন্ট অবজেক্টের মধ্যে প্রকৃত অবজেক্টটি সন্ধান করতে পারেন। আপনি আপনার সন্তানের বিষয়টিকে আলাদা করতে ক্লাস ব্যবহার করতে পারেন। এটি সহজ এবং মজাদার। অর্থাত

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

আপনি নীচের মত এটি করতে পারেন:

 $(this).find(".first").attr("alt")

এবং আরও নির্দিষ্ট হিসাবে:

 $(this).find("img.first").attr("alt")

আপনি উপরের কোড হিসাবে বাচ্চাদের সন্ধান করতে পারেন। আরও দেখার জন্য শিশুদের http://api.jquery.com/children/ এবং http://api.jquery.com/find/ দেখুন । উদাহরণ দেখুন http://jsfiddle.net/lalitjs/Nx8a6/


35

JQuery এ কোনও শিশুকে উল্লেখ করার উপায়। আমি নিম্নলিখিত jQuery এ সংক্ষিপ্তসার:

$(this).find("img"); // any img tag child or grandchild etc...   
$(this).children("img"); //any img tag child that is direct descendant 
$(this).find("img:first") //any img tag first child or first grandchild etc...
$(this).children("img:first") //the first img tag  child that is direct descendant 
$(this).children("img:nth-child(1)") //the img is first direct descendant child
$(this).next(); //the img is first direct descendant child

আমি নবম সন্তানের () ব্যবহার করব
একটি ম্যাকগুইনেস

31

ডিআইভির আইডি না জেনে আমি মনে করি আপনি এইভাবে আইএমজি নির্বাচন করতে পারেন:

$("#"+$(this).attr("id")+" img:first")

54
এটি সম্ভবত আসলে কাজ করে কিন্তু এটি ধরণ Rube গোল্ডবার্গ উত্তর :)
স্কট Evernden

8
এবং যদি আপনি এই কোডটি ব্যবহার করতে চলেছেন তবে কমপক্ষে করুন: $ ("#" + এটি.আইড + "ইমজি: প্রথম")
লোকালপিসিগুয়ে

10
@ লোকালপিসিগুয়ে আপনার অর্থ: "এবং যদি আপনি সেই কোড কলটি সাহায্যের জন্য ব্যবহার করতে চলেছেন "
জিডোরন মনিকা

'এটি' যদি ইতিমধ্যে প্রকৃত বিভাজন নির্বাচন করে তবে আপনি কেন এটি করবেন? এছাড়াও ডিভের আইডি না থাকলে এই কোডটি কাজ করবে না।
জর্জিও টেম্পেস্টা

31

এই কোড ব্যবহার করে দেখুন:

$(this).children()[0]

13
এটি কাজ করবে যদিও এটি কোনও ডোম উপাদানকে জিকিউ অবজেক্ট নয় ফেরত দেয়
redsquare

2
যদি এটা বর্তমান পরিস্থিতি সেরা পন্থা আমি জানি না, কিন্তু আপনি যদি এই রুট যান এবং এখনও একটি jQuery বস্তুর সঙ্গে শেষ করতে চান শুধু এটা যে ভাবে মোড়ানো: $($(this).children()[0])
পৃষ্ঠপোষক

19
বা আরও সহজ$(this:first-child)
rémy

4
$($(this).children()[x])ব্যবহারের পরিবর্তে $(this).eq(x)বা যদি আপনি প্রথমটি চান, ঠিক $(this).first()
ক্রিশ্চী মিহাই

16
@ রমি: এটি বৈধ সিনট্যাক্সও নয়। (কারও নজরে আসার জন্য 2 বছর ধরে
নিলেন

23

আপনি নিম্নলিখিত যে কোনও একটি পদ্ধতি ব্যবহার করতে পারেন:

1 সন্ধান ():

$(this).find('img');

2 শিশু ():

$(this).children('img');


15

আপনি পিতামাতার মধ্যে উপলব্ধ শিশু উপাদানগুলি উল্লেখ করতে চাইল্ড সেলেকার ব্যবহার করতে পারেন ।

$(' > img', this).attr("src");

নীচেরটি হল যদি আপনার কাছে রেফারেন্স না থাকে $(this)এবং আপনি অন্য ফাংশন থেকে একটিতে imgউপলব্ধ রেফারেন্স চান div

 $('#divid > img').attr("src");


8

এখানে একটি কার্যকরী কোড রয়েছে, আপনি এটি চালাতে পারেন (এটি একটি সাধারণ বিক্ষোভ)।

আপনি যখন ডিআইভিতে ক্লিক করেন আপনি কিছু ভিন্ন পদ্ধতি থেকে চিত্রটি পান, এই পরিস্থিতিতে "এটি" হ'ল ডিআইভি।

$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>

আশা করি এটা সাহায্য করবে!


5

আপনার নিজের <img>ভিতরে 0 থেকে অনেকগুলি ট্যাগ থাকতে পারে <div>

একটি উপাদান খুঁজে পেতে, ব্যবহার করুন .find()

আপনার কোডটি সুরক্ষিত রাখতে, একটি ব্যবহার করুন .each()

একাধিক উপাদান হ্যান্ডলিং করার অনুমতি দেয় এবং 0 টি উপাদানের ক্ষেত্রে নাল রেফারেন্স ত্রুটিগুলি ব্যবহার .find()এবং .each()একসাথে প্রতিরোধ করে।<img><img>

// Set the click handler on your div
$("body").off("click", "#mydiv").on("click", "#mydiv", function() {

  // Find the image using.find() and .each()
  $(this).find("img").each(function() {
  
        var img = this;  // "this" is, now, scoped to the image element
        
        // Do something with the image
        $(this).animate({
          width: ($(this).width() > 100 ? 100 : $(this).width() + 100) + "px"
        }, 500);
        
  });
  
});
#mydiv {
  text-align: center;
  vertical-align: middle;
  background-color: #000000;
  cursor: pointer;
  padding: 50px;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="mydiv">
  <img src="" width="100" height="100"/>
</div>


তুমি এইটা কেন করেছিলা? $("body").off("click", "#mydiv").on("click", "#mydiv", function() {
ক্রিস 22

আমি জানি না কীভাবে বা কোথায় অ্যালেক্স তার স্নিপেট ব্যবহার করছে। সুতরাং, আমি এটি যথাসম্ভব নিরাপদ এবং জেনেরিক করে তুলেছি। কোনও ইভেন্টের শরীরে সংযুক্তি এটি এটিকে তৈরি করবে যাতে ইভেন্টটি তৈরি হওয়ার সময় ডিভটি ডোমে না থাকলেও ইভেন্টটি ট্রিগার করবে। একটি নতুন তৈরি করার আগে ইভেন্টটি সাফ করা হ্যান্ডলারটিকে যখন কোনও ইভেন্ট ট্রিগার করা হয় তখন একাধিকবার চালানো থেকে বাধা দেয়। এটি আমার পথে করার দরকার নেই not কেবল ডিভের সাথে ইভেন্ট সংযুক্তিও কাজ করবে।
জেসন উইলিয়ামস

ধন্যবাদ। আমি এটি আগে কোনও স্ক্রিপ্টে দেখেছি এবং এটি যখন প্রোগ্রামারটির উদ্দেশ্য নিয়ে কাজ করেছিল, যখন আমি এটি একটি মডেল উইন্ডোর জন্য ব্যবহার করার চেষ্টা করেছি, ইভেন্টটি এখনও একক ক্লিকে বেশ কয়েকটি মডেল তৈরি করেছে। আমি অনুমান করি যে আমি এটি ভুল ব্যবহার করেছিলাম, তবে এটি event.stopImmediatePropagation()ঘটতে রোধ করার জন্য আমি উপাদানটি ব্যবহার করে ক্ষতবিক্ষত করেছি ।
ক্রিস 22

4

$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>


0

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>

11 বছর পূর্বে ফিলানাশের উত্তর থেকে এটি কীভাবে আলাদা?
ডেভিড

0

আপনার আইএমজি যদি ডিভের ভিতরে ঠিক প্রথম উপাদান হয় তবে চেষ্টা করুন

$(this.firstChild);

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.