检查类是否由 img src 组成，如果没有，则隐藏它.jquery.

check if class consist of img src, if not, hide it. jquery

本文关键字：如果没有 jquery 隐藏 组成 是否 img src 检查      更新时间：2023-09-26

我有一个预设的 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();
            }
        });

我明白了...您在"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/

你可以为此使用过滤器

$(".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();
    }
});

我自己试过，终于得到了。.

我先隐藏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
                        {
                        }
                    }); 
                }
            });
相关文章：