Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрыть все блоки div по условию (https://javascript.ru/forum/misc/67521-skryt-vse-bloki-div-po-usloviyu.html)

Mishat 22.02.2017 01:41

Скрыть все блоки div по условию
 
Здравствуйте, помогите пожалуйста решить проблему. Постоянно приходиться долго прокручивать страницу чтобы добраться до определенного блока.
Нужно скрыть все блоки div class="item" имеющие внутри блок div class="item__status" который не содержит тег span. Внутри блока div class="item" не один блок div - это я урезал пример для наглядности. Букмарклет из Javascript сделать смогу.

Код:

<div class="item" data-item="666" data-item-id="8336528" data-sale="true" data-count="1">
        <div class="item__status">
                <span class="icon icon-lock-scratch"></span>
        </div>
</div>


<div class="item" data-item="689" data-item-id="8330595" data-sale="true" data-count="1">
        <div class="item__status"></div>
</div>


<div class="item" data-item="674" data-item-id="8248010" data-sale="true" data-count="1">
        <div class="item__status">
                <span class="icon icon-lock-scratch"></span>
        </div>
</div>


ynherb 22.02.2017 09:44

var elem = document.querySelectorAll('.item')

for(var i = 0, el;; i < elem.length; i++) {
  (el = elem[i].querySelector('.item_status')) &&  (!el.querySelector('span')) && elem[i].display.style = 'none';
}

ksa 22.02.2017 10:18

Мои 5копеек... :)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('.item > .item__status').filter(function(){
		return $(this).find('span').length!=0;
	}).each(function(){
		$(this).parent().hide();
	});
});
</script>
</head>
<body>
<div class="item" data-item="666" data-item-id="8336528" data-sale="true" data-count="1"> 
	<div class="item__status">
		<span class="icon icon-lock-scratch">span_0</span>
	</div>
</div>
<div class="item" data-item="689" data-item-id="8330595" data-sale="true" data-count="1">
	<div class="item__status">no_span_0</div>
</div>
<div class="item" data-item="674" data-item-id="8248010" data-sale="true" data-count="1">
	<div class="item__status">
		<span class="icon icon-lock-scratch">span_1</span>
	</div>
</div>
</body>
</html>

рони 22.02.2017 10:50

Цитата:

Сообщение от ksa
Мои 5копеек...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
  $('.item > .item__status').each(function(){
    $(this).find('span').parents('.item').hide();
  });
});
</script>
</head>
<body>
<div class="item" data-item="666" data-item-id="8336528" data-sale="true" data-count="1">
  <div class="item__status">
    <span class="icon icon-lock-scratch">span_0</span>
  </div>
</div>
<div class="item" data-item="689" data-item-id="8330595" data-sale="true" data-count="1">
  <div class="item__status">no_span_0</div>
</div>
<div class="item" data-item="674" data-item-id="8248010" data-sale="true" data-count="1">
  <div class="item__status">
    <span class="icon icon-lock-scratch">span_1</span>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>
<div class="item" data-item="666" data-item-id="8336528" data-sale="true" data-count="1">
  <div class="item__status">
    <span class="icon icon-lock-scratch">span_0</span>
  </div>
</div>
<div class="item" data-item="689" data-item-id="8330595" data-sale="true" data-count="1">
  <div class="item__status">no_span_0</div>
</div>
<div class="item" data-item="674" data-item-id="8248010" data-sale="true" data-count="1">
  <div class="item__status">
    <span class="icon icon-lock-scratch">span_1</span>
  </div>
</div>
  <script>
    [].forEach.call( document.querySelectorAll('.item > .item__status'), function(el) {
        el.querySelector('span') && (el.parentNode.style.display = "none");
    });
  </script>

</body>
</html>


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