Я хочу скрыть родительский элемент, если содержащееся изображение пусто.

Question

У меня есть таблица с ячейкой, содержащая div для хранения изображения.

Что я хочу сделать, это если у самого изображения есть пустое значение src или есть ошибка при загрузке изображения, чтобы затем установить отображение родительской ячейки на none.

В таблице фактически будет отображаться серия изображений на странице, и не все они будут софиты или покажут ошибку.

В приведенном ниже коде показано, что ячейка таблицы ... info внутри {} является фактически динамическими значениями данных, передаваемыми как текстовые литералы. Если значение «IMG SRC» по ошибке или пусто, то я хочу, чтобы установить дисплей для идентификатора ТД на «нет.

<td style="text-align: center; vertical-align: top; width: 400px;" id="{tag_itemid}"> 
<div class="image_container"> 
    <div class="border"> 
     <div class="boxSep"> 
      <div style="width: 250px; height: 250px; border-radius: 15px;" class="imgLiquidFill imgLiquid imgLiquid_bgSize imgLiquid_ready"> 
       <a title="{tag_name_nolink}" target="_blank" href="{tag_itemurl_nolink}" style="display: block; width: 100%; height: 100%;"> 
        <img src="{tag_image (small)_value}" /> 
       </a> 
      </div> 
      </div> 
    </div> 
</div> 

также хотел бы, чтобы справиться с ситуацией, когда у меня есть только единая таблица на моей странице с 2 iamges в таблице каждых в DIV и я хочу, чтобы установить дисплей = нет для каждого DIV при условии ЦСИ изображения не является недопустимым URL или если SRC = «» - смотрите пример ниже

<table style="width: 100%;"> 
<tbody> 
    <tr> 
     <td> 
     <div class="image_container_no_rollover icg_4" id="hldr1"> 
      <img src="http://lorempixel.com/400/200/" alt=""> 
     </div> 
     <div id="hldr2" > 
      <img style="border: 0px none;" src="http://lorempixel.com/400/250/" alt=""> 
     </div> 
     </td> 
    </tr> 
</tbody> 

Answer 1

Существует несколько способов достижения этого. Например:

$('td').each(function() { 
    if($(this).find('img').attr('src') == "your evaluator here"){ 
     $(this).css('display', 'none'); 
    } 
}); 

Конечно, убедитесь, что весь DOM был загружен перед запуском этого кода.

Answer 2

Вот как это сделать:

$(document).ready(function() { 
    $("td").each(function() { 
     var $img = $(this).find("img"); 
     if ($img[0] === undefined) return; 

     var td = this; 
     $(this).find("img").on("error", function() { 
      $(td).css("display", "none"); 
     }); 
    }); 
}); 

Проверьте это: JSFiddle

Answer 3

Я нашел кого-то, кто был в состоянии предоставить мне искомое решение, для которого вы можете увидеть результаты работы ниже для обоих случаев с гораздо более простыми примерами.

Отвечая на первую часть ... Скрытие всех ячеек таблицы проверки каждого изображения внутри каждой ячейки и скрывая эту ячейку, если изображение является недопустимым или если SRC = «»

$(document).ready(function() { 
$("table").find("img").each(function(){ 
    if(!$(this).attr("src")){ 
     $(this).closest("td").hide(); 
    }else{ 
     var image = new Image(); 
     image.src = $(this).attr("src"); 
     if (image.width == 0) { 
      $(this).closest("td").hide(); 
     } 
    } 
}); 

});

Проверьте это: [JSFiddle] (http://jsfiddle.net/gregt57/wke7pbgm/11/)

Answer 4

В Отвечая на вторую часть моего вопроса ... Скрытие любого элемента, где его ребенок содержит недопустимое изображение или где SRC = «»

$(function() { 
$("#tbl01").find("img").each(function(){ 
    if(!$(this).attr("src")){ 
    $(this).parent().hide(); 
    }else{ 
    $(this).load(function(){ 
    // ... loaded 
    }).error(function(){ 
    // ... not loaded 
    $(this).parent().hide(); 
    }); 
    } 
}); 
}); 

Посмотрите на [JSFiddle]