获取图像的兄弟元素

Question

所以我有

<a href="1.html">
    <img src = "image.jpg" class = "picture"/>
    <div class="desc"><p>Brief Description</p></div>
</a>

<a href="2.html">
    <img src = "image2.jpg" class = "picture"/>
    <div class="desc"><p>Brief Description</p></div>
</a>

如何循环显示图片并相应更改div？

到目前为止，我有类似的内容：

var pictures = $('.picture');
(var a = 0; a < pictures.size(); a++){
    var description = (pictures.get(a)) (.siblings?)(.next?);
    //Do what I want with the description
}

Answer 1

您可以使用Jquery .each()循环遍历元素。并.siblings()获取该元素的兄弟。

$('.picture').each(function(){ var description = $(this).siblings('div. desc').text(); // Do what I want with the description });

Answer 2

注意.get(a)不会给你一个jQuery集，而是一个普通的对象 https://api.jquery.com/jquery.get/

var pictures = $('.picture');
pictures.each(function() {
    var description = $(this).next().html();
    //Do what I want with the description
    console.log(description);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="1.html">
    <img src = "image.jpg" class = "picture"/>
    <div class="desc"><p>Brief Description 1</p></div>
</a>

<a href="2.html">
    <img src = "image2.jpg" class = "picture"/>
    <div class="desc"><p>Brief Description 2</p></div>
</a>

Answer 3

如何直接选择说明<p>？

像这样：

$('.picture .desc p'). ...

Answer 4

您可以使用next。

$('.picture').each(function(idx, picture){
    $(picture).next('.desc'); //this will select div.desc
});