jQuery 如果 div 在某些 div 中有某些文本，则隐藏具有某些类的第一个 div

Question

First, this is what I've tried:

$(document).ready(function(){
  var text = $('div.product-number').text();
  var comparingText = '215365';
  
  if(text == comparingText){
    $('.checkout-spacing').css('display','none'); 
  }
});

I want to hide checkout-spacing if .product-number matches the condition above. But I only want to hide the first .checkout-saving which comes after the .product-number I just checked the condition for.

There will be several .product-number and .checkout-saving on the page, but never more than one of each inside each div. The .product-number will never have the same value twice on the same page, but the checkout-saving might (which doesn't really matter, as this is only going be hidden.)

If this is possible, is it possible to also check for several .product-number divs, and hide all their .checkout-saving child classes? It's not really "child", it comes further down HTML.

Copy of the HTML

<div class="mini-product ">
  <div class="mini-product-content">
    <div class="row-flex mini-product-content-wrapper">
      <div class="col any-1-1"><a class="product-image-link" title="PNY RTX 3080 10GB XLR8 Gaming EPIC-X RGB 3-FAN 3Slot" href="blablabla" onclick="Site.Common.trackLink('','', 'event8');">
          <img class="b-lazy product-image b-loaded" src="/image/dv_web_D180001002508551/215365/pny-rtx-3080-10gb-xlr8-gaming-epic-x-rgb-3-fan-3slot.jpg?$digital220x220$" alt="PNY RTX 3080 10GB XLR8 Gaming EPIC-X RGB 3-FAN 3Slot" title="PNY RTX 3080 10GB XLR8 Gaming EPIC-X RGB 3-FAN 3Slot"><noscript><img class="product-image" src="/image/dv_web_D180001002508551/215365/pny-rtx-3080-10gb-xlr8-gaming-epic-x-rgb-3-fan-3slot.jpg?$digital220x220$" alt="PNY RTX 3080 10GB XLR8 Gaming EPIC-X RGB 3-FAN 3Slot" title="" /></noscript>
        </a>
        <div class="product-in-stock--mobile"><span class="items-in-stock">

            <span class="checkout-spacing">På nettlager&nbsp;(100+)</span>
            &nbsp;
          </span>
          <span class="store-stock"></span></div>
      </div>
      <div class="col col-infos any-1-1">
        <div class="product-number sku rsNoDrag">215365</div>
        <div class="row-flex">
          <div class="col-flex S-order-2">

            <div class="product-ratings">
              <div id="BVRRInlineRating-215365" class="product-ratings__stars nd-bv-rating"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="align-center" width="100px" height="10px" viewBox="0 0 125 25">
                  <defs>
                    <linearGradient gradientUnits="userSpaceOnUse" x1="0%" y1="100%" x2="100%" y2="100%" id="rateGradient-31-215365">
                      <stop offset="100%" stop-color="#dddddd"></stop>
                    </linearGradient>
                  </defs>
                  <use xlink:href="#rating-stars" fill="url(#rateGradient-31-215365)"></use>
                </svg></div>
              <div class="product-ratings__avarage"></div>
            </div>
          </div>
          <div class="col-flex S-order-1">
            <a class="product-name" title="PNY RTX 3080 10GB XLR8 Gaming EPIC-X RGB 3-FAN 3Slot" href="blablabla">
              <span class="table any-1-1"><span class="table-cell">PNY RTX 3080 10GB XLR8 Gaming EPIC-X RGB 3-FAN 3Slot</span></span>
            </a>
          </div>
        </div>
        <div class="row-price">
          <div class="row-price-container">
            <div class="product-price">9&nbsp;365
              <div class="marketplace-seller-name marketplace-seller-name--none"><span class="none">&nbsp;</span></div>
              <div class="amount-of-offers amount-of-offers--none"><span class="none">&nbsp;</span></div>
            </div>
            <div class="energy-label-outer-wrap energy-label--mobile">
            </div>
          </div>
        </div>
      </div>
    </div>

    <span class="sales-point

">Forventet lev. jan 2021</span>
    <div class="row-flex on-hover">
      <div class="col-flex S-order-2 product-btns
two-buttons
"><a href="#" data-href="#215365@store-blablabla;10035@store-MasterRepository" class="el-button normal-btn regular-btn transparent-btn icon before compare-btn animate-icon add-to-compare">
          <span class="el-button-text"><span class="text"><span>Sammenlign</span></span></span>
          <svg class="circular" viewBox="26 26 52 52">
            <circle class="path" cx="52" cy="52" r="25" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
          </svg>
        </a>

        <div class="product-price-button price-button--desktop ">


          <div data-href="blablabla" class="button el-button cta add-to-basket no-min-width add-to-basket-ajax normal" title="Legg i handlevogn"><span class="el-button-text">
              <span class="text"><span class="product-price-text">
                  Legg i handlevogn</span></span>
            </span><svg class="circular" viewBox="26 26 52 52">
              <circle class="path" cx="52" cy="52" r="25" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
            </svg></div>
        </div>
        <div class="product-price-button price-button--mobile">
          <a class="button el-button cta normal-btn see-more add-to-basket no-min-width pdp-link" href="blablabla" title="Vis produkt">
            <span class="el-button-text">
              <span class="text">
                <span class="product-price-text">Vis produkt</span>
              </span>
            </span>
          </a>
        </div>
      </div>
      <div class="product-info-wrap">
        <div class="energy-label-outer-wrap energy-label--desktop">
        </div>
        <div class="product-in-stock product-in-stock--desktop"><span class="items-in-stock">

            <span class="checkout-spacing">På nettlager&nbsp;(100+)</span>
            &nbsp;
          </span><br>

          <span class="store-stock"></span></div>
      </div>

      <div class="product-info-wrap col-flex S-order-1">
        <div class="more-info bulletpoints-info">

          <ul class="specs">
            <li>NVIDIA Turing™ architecture, with 1440MHz core clock and 1710MHz boost clock speeds to help meet the needs of demanding games.</li>
            <li>10GB GDDR6X (320-bit) on-board memory, plus 4352 CUDA processing cores and up to 760GB/sec of memory bandwidth</li>
            <li>PCI Express 4.0 interface - Offers compatibility with a range of systems. Also includes DisplayPort and HDMI outputs for expanded connectivity.</li>
          </ul><span class="additional-info">
            <strong> *Vi har ikke varen på lager, forventet levering i starten av 2021.</strong>
          </span>
        </div>
      </div>
      <div class="product-info-wrap col-flex S-order-3 addictional-info-mobile">

        <span class="additional-info"> *Vi har ikke varen på lager, forventet levering i starten av 2021.</span></div>
    </div>
    <div class="empty-container">
      <div class="product-in-stock">
        <span class="items-in-stock "><span>&nbsp;</span>&nbsp;</span><br><span class="store-stock">&nbsp;</span>
      </div>
    </div>
  </div>
</div>

Answer 1

So, if you search through the .mini-product for the .product-number then when you hit the right number you can search the .mini-product again for the .checkout-spacing and hide them.

 $(document).ready(function(){ const comparingText = '215365'; $('.mini-product').each((index, mp) => { let productNumber = $(mp).find('.product-number').first().text().trim(); if(productNumber == comparingText) { $(mp).find('.checkout-spacing').each((csi, cs)=> { $(cs).css('display', 'none'); }); } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mini-product "> <div class="mini-product-content"> <div class="row-flex mini-product-content-wrapper"> <div class="col any-1-1"> <div class="product-in-stock--mobile"><span class="items-in-stock"> <span class="checkout-spacing">På nettlager&nbsp;(100+)</span> &nbsp; </span> <span class="store-stock"></span> </div> </div> <div class="col col-infos any-1-1"> <div class="product-number sku rsNoDrag">215365</div> </div> </div> <div class="row-flex on-hover"> <div class="product-info-wrap"> <div class="product-in-stock product-in-stock--desktop"> <span class="items-in-stock"> <span class="checkout-spacing">På nettlager&nbsp;(100+)</span> &nbsp; </span> </div> </div> </div> </div> </div>

If you want to have multiple numbers to search for, create an array and use includes :

//instead of const comparingText = '215365';
const numbersToCheck = ['215365', '4400', '42'];


//instead of if(productNumber == comparingText)
if(numbersToCheck.includes(productNumber))
{

}