Форум

Ленча · #1 (**permalink**) 14.12.2017, 23:08

Есть несколько блоков класса tablewrap

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

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

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

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

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

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

Спасибо.

рони · #2 (**permalink**) 14.12.2017, 23:30

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

рони · #3 (**permalink**) 14.12.2017, 23:31

Сообщение от Ленча

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

each

Ленча · #4 (**permalink**) 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 );

рони · #5 (**permalink**) 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>

Ленча · #6 (**permalink**) 15.12.2017, 00:23

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

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript