如果字符串参数等于div的文本，如何隐藏最接近的标签

Question

If the text in div.level equals the text in variable dlevel I would like to hide the closest label to that div.

I cannot directly edit the HTML, it is automatically created by the software so I cannot edit the text in div.level. The variable "dlevel" is actually being pulled in from a URL parameter. I can change this parameter (the value of 'dlevel') as it may be an issue with it containing '$'. However, this needs to be versatile so that if the parameter is 50 the label for 50 is hidden and not the label for 500 and vice versa. Any help would be greatly appreciated.

 var dlevel = '$50'; $('div.level').filter(function () { return $(this).text() == dlevel; }).closest('label').hide(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="level-container"> <label> <div class="level"> $50 </div> </label> </div> <div class="level-container"> <label> <div class="level"> $100 </div> </label> </div> <div class="level-container"> <label> <div class="level"> $500 </div> </label> </div> 

Answer 1

I think you are using the wrong approach.

You can loop through the divs .level using jQuery each() and get the textContent of each div.

Then all you need to do is the check if the text equals to the value of dlevel , if yes, get the closest label with closest() (that traverse up the DOM) and hide it.

 var dlevel = '$50'; $('div.level').each(function(){ let text = this.textContent.trim(); //or this.innerText.trim() if (text == dlevel){ $(this).closest('label').hide() } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="level-container"> <label> <div class="level"> $50 </div> </label> </div> <div class="level-container"> <label> <div class="level"> $100 </div> </label> </div> <div class="level-container"> <label> <div class="level"> $500 </div> </label> </div> 

Answer 2

尝试$（this）.text（）。trim（）=== dlevel

Answer 3

Try using a each() like this. You also need to use trim() to remove the whitespace. You can use parent() to find the label parent of each .level as long as the label is always the parent.

 let dlevel = "$50"; $('div.level').each( function() { if ($(this).text().trim() === dlevel) { $(this).parent().hide() } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="level-container"> <label> <div class="level"> $50 </div> </label> </div> <div class="level-container"> <label> <div class="level"> $100 </div> </label> </div> <div class="level-container"> <label> <div class="level"> $500 </div> </label> </div> 

Answer 4

Try Following using $.each

  var dlevel = "$50"; $.each($('div .level'),function(i,val){ if($(val).text().trim()==dlevel) { $(val).closest('label').hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="level-container"> <label> <div class="level"> $50 </div> </label> </div> <div class="level-container"> <label> <div class="level"> $100 </div> </label> </div> <div class="level-container"> <label> <div class="level"> $500 </div> </label> </div>