Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скрыть пустые блоки (https://javascript.ru/forum/jquery/71816-skryt-pustye-bloki.html)

Ленча 14.12.2017 23:08

Скрыть пустые блоки
 
Есть несколько блоков класса tablewrap

В этих блоках всегда есть заголовки. Но, в зависимости от фильтрации, не всегда есть что-то помимо заголовков.

Задача: скрыть блоки, в которых нет ничего, кроме заголовка.

Наваяла такую штуку, ориентируясь на наличие или отстутсвие строк в блоках

( function($) {
		$(document).ready(function () {
				$(!'div:contains("items-row")').closest('.tablewrap').remove();
		});
	} ) ( jQuery );


Только работает это неправильно. Если хоть в одном блоке есть Items-row - показывает все, и пустые, и с элементом. Если нигде нет - все скрывает.

Нужно как-то задать обод блоков по порядку и для каждого выполнять эту функцию отдельно, но что-то ничего похожего не гуглится.

Спасибо.

рони 14.12.2017 23:30

Ленча,
сделайте минимальный html, чтоб было понятно, что хотите удалить, а что оставить.

рони 14.12.2017 23:31

Цитата:

Сообщение от Ленча
для каждого выполнять эту функцию отдельно

each

Ленча 14.12.2017 23:53

<div class="tablewrap">
	<h2>Заголовок</h2>
		<div class="items-row">
			блаблабла
		</div>	
</div>
<div class="tablewrap">
	<h2>Заголовок</h2>
</div>
<div class="tablewrap">
	<h2>Заголовок</h2>
		<div class="items-row">
			блаблабла
		</div>	
</div>


Второй tablewrap нужно удалить, потому что он не содержит внутри items-row

Количество блоков произвольное, в каком не будет элемента - заранее сказать нельзя.

each у меня что-то не взлетело(

( function($) {
		$(document).ready(function () {
			$( "tablewrap" ).each(function( ) {
				if(!$(this).children('.items-row').length > 0) {
					$(this).css("display":none);
				}
			});
		});
	} ) ( jQuery );

рони 15.12.2017 00:00

Ленча,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
     $(".tablewrap").each(function(indx, el){  
           $(el).has(".items-row").length || $(el).remove()
           });
});
  </script>
</head>

<body>
<div class="tablewrap">
	<h2>Заголовок</h2>
		<div class="items-row">
			блаблабла
		</div>
</div>
<div class="tablewrap">
	<h2>Заголовок</h2>
</div>
<div class="tablewrap">
	<h2>Заголовок</h2>
		<div class="items-row">
			блаблабла
		</div>
</div>


</body>
</html>

Ленча 15.12.2017 00:23

Ух ты! Красиво)

Спасибо!


Часовой пояс GMT +3, время: 04:58.