jQuery 通过单击获取此元素的子元素

Question

我有一个html代码:

<div class="customers-otziv__content items">
                            
                            <div class="customers-otziv__photo"> 
                                    <img data-id="1" src="girl1.jpg"  class="reviews__photo">
                            </div>
                            <div class="customers-otziv__photo">
                                    <img data-id="2" src="girl2.jpg" class="reviews__photo">
                            </div>
                            <div class="customers-otziv__photo">     
                                    <img data-id="3" src="girl3.jpg"  class="reviews__photo">
                            </div>    
 
</div>
<div class="customers-otziv__content items">
                            
                            <div class="customers-otziv__photo"> 
                                    <img data-id="4" src="girl4.jpg"  class="reviews__photo">
                            </div>
                            <div class="customers-otziv__photo">
                                    <img data-id="5" src="girl5.jpg" class="reviews__photo">
                            </div>
                            <div class="customers-otziv__photo">     
                                    <img data-id="6" src="girl6.jpg"  class="reviews__photo">
                            </div>    
 
</div>
<div class="listblock-otziv"></div>

我想要获取这个元素最近的父图像子元素的img源列表并将它们附加到listblock-otziv:

    data_otziv = $(this).closest('.customers-otziv__content .items').map((i, el) => ({
        src: $(el).find('.reviews-photo').prop('src'),
    })).get();
        $.map( data_otziv, function( item, i ) {
        $(".listblock-otziv").append(`
            <div class="listblock-otziv__content" data-id="${i}">
                <img  class="listblock-otziv__photo" src="${item.src}">
            </div>`
            );
        })

但我只得到一个图像的src值)!请帮助!

Answer 1

您的第一个问题是.closest('.customers-otziv__content .items')与您不想要的.closest('.customers-otziv__content").find(".items')相同。更改为

...closest('.customers-otziv__content.items')...

其次:$(el).find('.reviews__photo').prop('src')将总是给你第一个src=，因为prop返回一个字符串而不是数组(.text()在这里的工作方式不同)。你需要。map把它们都取出来。

最简单的方法是直接映射.reviews__photo元素:

$(this).closest('.customers-otziv__content.items').find(".reviews__photo").map((i, el) => ({
    src: $(el).prop('src')
})).get();

第三，如果你这样做，那么似乎不需要临时数组data_otziv，因为i将与i相同，item将与el相同。切换jquery .map((i, el)和数组.map((item,i) .