Question

我有一个预设的7个图像持有者div，我向php发送请求以检索用户的作品，所以说如果有3个作品并且我添加到3个img持有者，我将有4个空图像div，我我不知道如何检查以隐藏其余部分。

HTML

<div class="portfolio_thumb">
   <div class="portfolio_thumbImg_holder columns"><img src=""></div>
   <div class="portfolio_thumbImg_holder active columns"><img src=""></div>
   <div class="portfolio_thumbImg_holder columns"><img src=""></div>
   <div class="portfolio_thumbImg_holder columns"><img src=""></div>
   <div class="portfolio_thumbImg_holder columns"><img src=""></div>
   <div class="portfolio_thumbImg_holder columns"><img src=""></div>
   <div class="portfolio_thumbImg_holder columns"><img src=""></div>
</div>

Jquery的

$('.portfolio_thumbImg_holder img').each(function(index, element) { 

    linksArray.push("http://localhost/testdatabase/cms/" + data[index].links);
    $(element).attr("src", linksArray[index]);
    titleArray.push(data[index].title);
    $(element).attr("title", titleArray[index]);
    descArray.push(data[index].desc);
    $(element).attr("desc", descArray[index]);
    alert("index:"+index + " " + linksArray[index] + " " + titleArray[index] + " " + descArray[index]);
});

如何改进jquery代码以隐藏未加载图像的所有其他div？

代码运行后

我的

<div class="portfolio_thumbImg_holder columns"><img src=""></div>

成为

<div class="portfolio_thumbImg_holder columns"><img></div>

所以我不能使用

$(".portfolio_thumbImg_holder img[src='']").hide();

更新

@jackDuong提供了我需要的代码

$(".portfolio_thumbImg_holder img:not([src])").parent().hide();

但是在我的当前代码实现之后，$ .each函数之后的所有代码都不会运行，任何想法为什么？

$.ajax({
            type: "POST",
            dataType: "json",
            data: ({id: idArray[index]}), // pass the name of clicked holder into php to query
            url: "CMS/PHP/retrieveAuthorWorks.php",
            success: function(data) {   
                // reset all the arrays value to store new values upon new click
                $('.portfolio_thumbImg_holder img').removeAttr("src");
                linksArray=[];  
                titleArray=[];  
                descArray=[];   
                $(".full_image_desc .title").html(data[0].title);
                $(".full_image_desc .info").html(data[0].desc);

                $('.portfolio_thumbImg_holder img').each(function(index, element) {                                                     
                    linksArray.push("http://localhost/testdatabase/cms/" + data[index].links);
                    $(element).attr("src", linksArray[index]);
                    titleArray.push(data[index].title);
                    $(element).attr("title", titleArray[index]);
                    descArray.push(data[index].desc);
                    $(element).attr("desc", descArray[index]);
                    //$(".portfolio_thumbImg_holder img:not([src])").parent().hide();
                }); 
                // from here onwards code won't run
                alert("hi");
                $(".portfolio_thumbImg_holder img:not([src])").parent().hide();
            }
        });

Answer 1

我明白了......你在“ portfolio_thumb ”中添加了7个榆树。

只是做：

$(".portfolio_thumbImg_holder img[src='']").hide();

如果你想隐藏div（父母）只是做：

$(".portfolio_thumbImg_holder img[src='']").parent().hide();

试试这个例子： http://jsfiddle.net/duongtuanluc/2ktwa75e/

我看到你改变了问题。

如果标记 img 没有属性 src 只是做：

$(".portfolio_thumbImg_holder img:not([src])").parent().hide();

试试这个例子 http://jsfiddle.net/duongtuanluc/2ktwa75e/

Answer 2

您可以使用过滤器

$(".portfolio_thumbImg_holder").filter(function() {
    var imgAttr = $(this).find("img").attr("src")
    return imgAttr == typeof undefined || imgAttr == false
}).hide();

或者你可以遍历每个div以检查它是否有图像然后隐藏它

$(".portfolio_thumbImg_holder").each(function() {
    var imgAttr = $(this).find("img").attr("src")
    if (imgAttr == typeof undefined || imgAttr == false) {
        $(this).hide();
    }
});

Answer 3

我自己尝试了，最后得到了它。

我先隐藏div

$(".portfolio_thumbImg_holder").hide();

检索完成后，说3个项目src将被添加到前3个div，然后我做

if($(this).has('src')){
    $(".portfolio_thumbImg_holder:nth("+index+")").show();
        alert("shown " + index);
    }
else
    {
    }

最终代码

$.ajax({
            type: "POST",
            dataType: "json",
            data: ({id: idArray[index]}), // pass the name of clicked holder into php to query
            url: "CMS/PHP/retrieveAuthorWorks.php",
            success: function(data) {   
                // reset all the arrays value to store new values upon new click
                $('.portfolio_thumbImg_holder img').removeAttr("src");
                linksArray=[];  
                titleArray=[];  
                descArray=[];   
                $(".full_image_desc .title").html(data[0].title);
                $(".full_image_desc .info").html(data[0].desc);

                $(".portfolio_thumbImg_holder").hide();
                $('.portfolio_thumbImg_holder img').each(function(index, element) { 

                        linksArray.push("http://localhost/testdatabase/cms/" + data[index].links);
                        $(element).attr("src", linksArray[index]);
                        titleArray.push(data[index].title);
                        $(element).attr("title", titleArray[index]);
                        descArray.push(data[index].desc);
                        $(element).attr("desc", descArray[index]);
                        alert("index:"+index + " " + linksArray[index] + " " + titleArray[index] + " " + descArray[index]);                     
                        if($(this).has('src')){
                            $(".portfolio_thumbImg_holder:nth("+index+")").show();
                            alert("shown " + index);
                        }
                        else
                        {
                        }
                    }); 
                }
            });

检查类是否包含img src，如果没有，则隐藏它。 jQuery的

3 个答案: