JQuery嵌套映射报错求助：$(...)[i].find不是函数

报错信息 #

Query.Deferred exception: $(...)[i].find is not a function TypeError: $(...)[i].find is not a function

需求 #

遍历每个.customers-otziv__content容器，隐藏超出容器宽度的图片，并在最后一个可见图片的容器中添加+ещё {number}（对应需求中的+more{number} images）文本提示。

相关HTML结构 #

<div class="customers-otziv__content">
                            
    <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">
                            
    <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="customers-otziv__content">
                            
    <div class="customers-otziv__photo"> 
        <img data-id="7" src="girl7.jpg"  class="reviews__photo">
    </div>

    <div class="customers-otziv__photo">
        <img data-id="8" src="girl8.jpg" class="reviews__photo">
    </div>

    <div class="customers-otziv__photo">     
        <img data-id="9" src="girl9.jpg"  class="reviews__photo">
    </div>    

</div>

原出错代码 #

let images_otziv = [];
$(document).ready(function(){
    let last_child_index;
    let other_qty = 0;    
    let content_width = $(document).find('.customers-otziv__content').width();

    content_list = $(document).find('.customers-otziv__content').map((i, el) => ({  
        content: $(el),
    })).get();

    $.map( content_list, function( item, i ) {
        console.log(i);
        console.log(777); 

        images_otziv = $('.customers-otziv__content')[i].map((i, el) => ({  
            img: $(el).find('.reviews__photo'),
        })).get();

        $.map( images_otziv, function( item, i ) {
            let img_width = $(item.img).width();       
            let content_temp_width = content_width - img_width;   
            if((content_temp_width) > img_width) {
                last_child_index = i + 1;
                $(item.img).show();
            } else {
                $(item.img).closest('.customers-otziv__photo').hide();
                other_qty = other_qty + 1;
            } 
            content_width = content_temp_width;
        }) 
        if(other_qty >= 1) {
                $('.customers-otziv__photo[data-id=' + last_child_index + ']').find('.reviews__photo').css('opacity', '0.5');
                $('.customers-otziv__photo[data-id=' + last_child_index + ']').append(`<div class="centered" style="display:none" id="haveMore">+ещё ${other_qty}</div>`);
                $('.customers-otziv__photo[data-id=' + last_child_index + ']').attr("id", "lastElem");
            }
                $("#haveMore").attr("style", "position:absolute; top:60%; font-size: 20px; z-index:999");

    })  
});

错误原因 #

1. $('.customers-otziv__content')[i]获取的是原生DOM元素，不是jQuery对象，无法直接调用.map()、.find()等jQuery方法。
2. 全局变量content_width、other_qty、last_child_index在遍历多个容器时会互相干扰，导致计算逻辑混乱。
3. 使用data-id匹配元素会跨容器选中，无法精准定位当前容器内的最后可见图片。
4. 重复使用id="haveMore"违反DOM规范，同一页面中ID必须唯一。

修正后的代码 #

$(document).ready(function(){
    // 遍历每个图片容器，独立处理每个容器的逻辑
    $('.customers-otziv__content').each(function() {
        const $content = $(this);
        let remainingWidth = $content.width();
        let lastVisibleIndex = -1;
        let hiddenCount = 0;
        const $photoWrappers = $content.find('.customers-otziv__photo');

        // 遍历当前容器内的所有图片容器
        $photoWrappers.each(function(index) {
            const $wrapper = $(this);
            const imgWidth = $wrapper.find('.reviews__photo').width();
            
            if (remainingWidth - imgWidth > 0) {
                // 剩余宽度足够放下当前图片，保持显示
                lastVisibleIndex = index;
                $wrapper.show();
                remainingWidth -= imgWidth;
            } else {
                // 剩余宽度不足，隐藏当前图片
                $wrapper.hide();
                hiddenCount++;
            }
        });

        // 如果有隐藏的图片，添加提示文本
        if (hiddenCount > 0 && lastVisibleIndex !== -1) {
            const $lastVisible = $photoWrappers.eq(lastVisibleIndex);
            $lastVisible.find('.reviews__photo').css('opacity', '0.5');
            // 使用类名替代ID，避免重复
            $lastVisible.append(`<div class="centered have-more" style="position:absolute; top:60%; font-size:20px; z-index:999">+ещё ${hiddenCount}</div>`);
            $lastVisible.addClass('last-visible-photo'); // 用类名替代ID，避免重复
        }
    });
});

关键优化点 #

• 用.each()遍历容器，每个容器独立维护计算变量，避免全局污染。
• 对原生DOM元素用$()包裹转为jQuery对象，确保能调用jQuery方法。
• 限定所有元素查找范围在当前容器内（$content.find(...)），避免操作其他容器的元素。
• 替换重复ID为类名，符合DOM规范。
• 调整可见性判断逻辑为"剩余宽度是否足够放下当前图片"，更贴合实际需求。

内容的提问来源于stack exchange，提问作者Azizxon Zufarov