Відповіді:
Конструктор jQuery приймає другий параметр, context
який називається, який може бути використаний для зміни контексту вибору.
jQuery("img", this);
Що таке, як використовувати .find()
таке:
jQuery(this).find("img");
Якщо бажані зображення є лише прямими нащадками клацнутого елемента, ви також можете використовувати .children()
:
jQuery(this).children("img");
Ви також можете використовувати
$(this).find('img');
що повертало б усіх img
, хто є нащадкамиdiv
$(this).children('img')
було б краще. наприклад, <div><img src="..." /><div><img src="..." /></div></div>
тому що, імовірно, користувач хоче знайти зображення першого рівня.
Якщо вам потрібно отримати перший, img
який знижується рівно на один рівень, ви можете це зробити
$(this).children("img:first")
.children()
звідки походить "вниз рівно на один рівень" і :first
звідки прийшов "перший".
.find()
замість.children()
this
вже було посилання на те, <div>
що містить <img>
, однак, якщо у вас є кілька рівнів тегів, щоб перейти від посилання, яке ви мали, тоді ви точно можете скласти більше, ніж один children()
дзвінок
Якщо ваш тег DIV негайно супроводжується тегом IMG, ви також можете використовувати:
$(this).next();
У прямих дітей
$('> .child-class', this)
Ви можете знайти всі елементи 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>
тоді ви не можете використовувати верхній код, щоб знайти значення alt другого елемента img. Тож ви можете спробувати це:
$(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")
Ви можете використовувати find або дітей, як описано вище. Для більш детального відвідування дітей 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
Не знаючи ідентифікатора DIV, я думаю, ви можете вибрати IMG так:
$("#"+$(this).attr("id")+" img:first")
Спробуйте цей код:
$(this).children()[0]
$($(this).children()[0])
.
$(this:first-child)
$($(this).children()[x])
використання $(this).eq(x)
або якщо ви хочете перший, просто $(this).first()
.
Ви можете скористатися одним із наведених нижче способів:
1 знайти ():
$(this).find('img');
2 дітей ():
$(this).children('img');
jQuery - each
це один варіант:
<div id="test">
<img src="testing.png"/>
<img src="testing1.png"/>
</div>
$('#test img').each(function(){
console.log($(this).attr('src'));
});
Ви можете використовувати дочірній селектор для посилання на дочірні елементи, доступні у батьків.
$(' > img', this).attr("src");
А нижче - якщо ви не маєте посилання $(this)
і хочете, щоб посилання були img
доступні в межах div
іншої функції.
$('#divid > img').attr("src");
Ось функціональний код, ви можете запустити його (це проста демонстрація).
Коли ви клацаєте на DIV, ви отримуєте зображення за допомогою різних методів, у цій ситуації "це" є 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>
Сподіваюся, це допомагає!
У вас може бути від 0 до багатьох <img>
тегів <div>
.
Щоб знайти елемент, використовуйте a .find()
.
Щоб захистити свій код, використовуйте .each()
.
Використання .find()
та .each()
разом запобігають нульовим помилкам посилання у випадку 0 <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() {
event.stopImmediatePropagation()
елемента, щоб не допустити цього.
$(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>
Ви можете використовувати
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(this).find('img');
</script>
Якщо ваш img є саме першим елементом всередині div, то спробуйте
$(this.firstChild);