Как выбрать родительский элемент div с помощью js - PullRequest
Новая
       1

Как выбрать родительский элемент div с помощью js

1 голос
/ 02 марта 2020

Это мой html код: 

<div class="w-grid-list">
<article class="product_cat-19">
    <div class="w-grid-item-h">
        <a class="w-grid-item-anchor" href="#"></a>
            <div class="w-vwrapper">
                <div class="w-post-elm">
                    <a href="">
                        title1
                    </a>
                </div>
                <div class="w-post-elm">
                    <span class="w-post-elm-before">color code : </span>
                    <span class="sku">228</span>
                </div>
                <div class="w-html">color</div>
            </div>  
    </div>
</article>
<article class="product_cat-19">
    <div class="w-grid-item-h">
        <a class="w-grid-item-anchor" href="#"></a>
            <div class="w-vwrapper">
                <div class="w-post-elm">
                    <a href="">
                        title2
                    </a>
                </div>
                <div class="w-post-elm">
                    <span class="w-post-elm-before">color code : </span>
                    <span class="sku">229</span>
                </div>
                <div class="w-html">color</div>
            </div>  
    </div>
</article>
</div>

<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
    <article class="product_cat-18">
        <div class="w-grid-item-h">
            <div class="w-hwrapper">
                <div class="w-vwrapper">
                    <div class="w-post-elm">
                        <a href="#"></a></div>
                            <h2 class="w-post-elm">
                                <a href="#">title of product1</a>
                            </h2>
                    <div class="w-post-elm">
                        <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>
<div class="owl-item active" style="width: 204px;">
    <article class="product_cat-19">
        <div class="w-grid-item-h">
            <div class="w-hwrapper">
                <div class="w-vwrapper">
                    <div class="w-post-elm">
                        <a href="#"></a></div>
                            <h2 class="w-post-elm">
                                <a href="#">title of product2</a>
                            </h2>
                    <div class="w-post-elm">
                        <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>
</div>

И я хочу скрыть (отображение стиля: нет) Div-элемент только с классом "owl-item", который имеет тег "article" с " product_cat-19 "class.

my JavaScript код: 

<script>
    // get the heading from the first article
    const product_cat_19 = document.querySelector('.product_cat-19');
    // get its parent, the current article
    const currentArticle = product_cat_19.parentNode.style.display='none';
</script>

этот код не может скрыть класс" owl-item ". но скрыть div с классом "w-grid-list". Есть ли способ сделать это только с css или js нужно? Я искал в Google и нашел только решения для этой проблемы с JavaScript, которые не работали должным образом. Кто-нибудь может помочь мне отредактировать мой код?

Ответы [ 2 ]

3 голосов
/ 02 марта 2020

Вы можете получить элемент, оба, с помощью JavaScript & CSS примерно так:

JavaScript: 

const el = document.querySelectorAll('.owl-item .product_cat-19');
el[0].style.display = 'none';

CSS: 

.owl-item > .product_cat-19 {
   display: none;
 }
2 голосов
/ 02 марта 2020

querySelector() будет соответствовать только первому обнаруженному событию. Вам нужно от querySelectorAll() до go через все элементы, а затем проверить, есть ли у родителей (или нет) класс, который вы ищете:

пример: https://codepen.io/gc-nomade/pen/YzXQeyN

for (let e of document.querySelectorAll('.product_cat-19')) {
  var dady = e.parentNode;
  if (dady.classList.contains("owl-item")) {
    dady.style.display = "none";
  }
}
<div class="w-grid-list">
  <article class="product_cat-19">
    <div class="w-grid-item-h">
      <a class="w-grid-item-anchor" href="#"></a>
      <div class="w-vwrapper">
        <div class="w-post-elm">
          <a href="">
                        title1
                    </a>
        </div>
        <div class="w-post-elm">
          <span class="w-post-elm-before">color code : </span>
          <span class="sku">228</span>
        </div>
        <div class="w-html">color</div>
      </div>
    </div>
  </article>
  <article class="product_cat-19">
    <div class="w-grid-item-h">
      <a class="w-grid-item-anchor" href="#"></a>
      <div class="w-vwrapper">
        <div class="w-post-elm">
          <a href="">
                        title2
                    </a>
        </div>
        <div class="w-post-elm">
          <span class="w-post-elm-before">color code : </span>
          <span class="sku">229</span>
        </div>
        <div class="w-html">color</div>
      </div>
    </div>
  </article>
</div>
<div class="owl-stage">
  <div class="owl-item active" style="width: 204px;">
    <article class="product_cat-18">
      <div class="w-grid-item-h">
        <div class="w-hwrapper">
          <div class="w-vwrapper">
            <div class="w-post-elm">
              <a href="#"></a>
            </div>
            <h2 class="w-post-elm">
              <a href="#">title of product1</a>
            </h2>
            <div class="w-post-elm">
              <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>    
  
  <!-- will be hidden -->
  <div class="owl-item active" style="width: 204px;">
  <!-- because of this child -->
    <article class="product_cat-19">
      <div class="w-grid-item-h">
        <div class="w-hwrapper">
          <div class="w-vwrapper">
            <div class="w-post-elm">
              <a href="#"></a>
            </div>
            <h2 class="w-post-elm">
              <a href="#">title of product2</a>
            </h2>
            <div class="w-post-elm">
              <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>

Родитель продукта product2 скрыт, если это то, что вы искали. их может быть много, он будет скрывать каждого .owl-item, содержащего прямого потомка с классом .product_cat-19.

, если вы хотите скрыть любой родительский контейнер, если у него нет .w-grid-list,

таким же образом проверьте класс, затем if(okay){leave it} else { hide it} 

for (let e of document.querySelectorAll('.product_cat-19')) {
 var dady = e.parentNode;
  if (dady.classList.contains("w-grid-list")) {}
  else {
  dady.style.display="none"; 
 }
}
<div class="w-grid-list">
  <article class="product_cat-19">
    <div class="w-grid-item-h">
      <a class="w-grid-item-anchor" href="#"></a>
      <div class="w-vwrapper">
        <div class="w-post-elm">
          <a href="">
                        title1
                    </a>
        </div>
        <div class="w-post-elm">
          <span class="w-post-elm-before">color code : </span>
          <span class="sku">228</span>
        </div>
        <div class="w-html">color</div>
      </div>
    </div>
  </article>
  <article class="product_cat-19">
    <div class="w-grid-item-h">
      <a class="w-grid-item-anchor" href="#"></a>
      <div class="w-vwrapper">
        <div class="w-post-elm">
          <a href="">
                        title2
                    </a>
        </div>
        <div class="w-post-elm">
          <span class="w-post-elm-before">color code : </span>
          <span class="sku">229</span>
        </div>
        <div class="w-html">color</div>
      </div>
    </div>
  </article>
</div>
<div class="owl-stage">
  <div class="owl-item active" style="width: 204px;">
    <article class="product_cat-18">
      <div class="w-grid-item-h">
        <div class="w-hwrapper">
          <div class="w-vwrapper">
            <div class="w-post-elm">
              <a href="#"></a>
            </div>
            <h2 class="w-post-elm">
              <a href="#">title of product1</a>
            </h2>
            <div class="w-post-elm">
              <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>    
  
  <!-- will be hidden -->
  <div class="owl-item active" style="width: 204px;">
  <!-- because of this child -->
    <article class="product_cat-19">
      <div class="w-grid-item-h">
        <div class="w-hwrapper">
          <div class="w-vwrapper">
            <div class="w-post-elm">
              <a href="#"></a>
            </div>
            <h2 class="w-post-elm">
              <a href="#">title of product2</a>
            </h2>
            <div class="w-post-elm">
              <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>
...