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

8 Answers

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

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

যা div এর বংশধর সব img গুলি ফিরে হবে

javascript jquery jquery-selectors this

আমি এই অনুরূপ একটি বিন্যাস আছে:

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

এবং ক্লিকের img শিশু img নির্বাচন করতে একটি jQuery নির্বাচক ব্যবহার করতে চান।

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

$(this)

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




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

$(this).next();



আপনি নীচের মত পিতামাতার div এর সব img উপাদান খুঁজে পেতে পারেন

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

আপনি নির্দিষ্ট img উপাদান চান তাহলে আপনি এই মত লিখতে পারেন

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

আপনার div শুধুমাত্র একটি img উপাদান ধারণ করে। তাই এই নীচের জন্য ডান

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

কিন্তু যদি আপনার div নীচের মত আরো img উপাদান থাকে

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




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



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

1 সন্ধান করুন ():

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

2 শিশু ():

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



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

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

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

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



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

যখন আপনি ডিভিভিতে ক্লিক করেন তখন আপনি বিভিন্ন পদ্ধতি থেকে ছবিটি পেতে পারেন, এই অবস্থায় "এই" ডিভি।

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

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




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



Related