如何解决jQuery如果div在某些div中具有某些文本，则使用某些类隐藏FIRST div
首先，这是我尝试过的：
$(document).ready(function(){
var text = $('div.product-number').text();
var comparingText = '215365';
if(text == comparingText){
$('.checkout-spacing').css('display','none');
}
});
如果checkout-spacing符合以上条件，我想隐藏.product-number。但我只想隐藏刚刚检查条件的.checkout-saving之后的 first .product-number。
页面上将有多个.product-number和.checkout-saving，但每个div内最多只能有一个。 .product-number永远不会在同一页面上两次具有相同的值，但是checkout-saving可能会（实际上并不重要，因为这只会被隐藏）。
如果可能的话，是否还可以检查几个.product-number的div，并隐藏其所有的.checkout-saving子类？它不是真正的“孩子”，它在HTML的后面。
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 (100+)</span>
</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 365
<div class="marketplace-seller-name marketplace-seller-name--none"><span class="none"> </span></div>
<div class="amount-of-offers amount-of-offers--none"><span class="none"> </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 (100+)</span>
</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> </span> </span><br><span class="store-stock"> </span>
</div>
</div>
</div>
</div>
解决方法
因此，如果您在.mini-product中搜索.product-number，则当您按下正确的数字时，可以再次在.mini-product中搜索.checkout-spacing并将其隐藏。
$(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 (100+)</span>
</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 (100+)</span>
</span>
</div>
</div>
</div>
</div>
</div>
如果要搜索多个数字，请创建一个数组并使用includes：
//instead of const comparingText = '215365';
const numbersToCheck = ['215365','4400','42'];
//instead of if(productNumber == comparingText)
if(numbersToCheck.includes(productNumber))
{
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
