如何检查字符串是否存在并更改另一个元素的字符串？

Question

Hi I'm trying to figure out how to check for the presence of a particular string, AND if that string is NOT present, change the text of another node.

The following shows what I've done so far. The problem I'm having is, my condition to execute the text change simply doesn't work. Admittedly, this is my first time using indexOf(), so I'm not certain that I'm doing so properly.

 // Check to see if there are non-refundable rates // If they are NOT refundable DO NOT change the name var taoIGCOR = jQuery('.rateInfoContainer[data-rate-code="RATECODE"]'); var taoRateBullet = jQuery('.rateBullet').text().indexOf('Non Refundable') <= -1; if (jQuery(taoRateBullet).text().indexOf('Non Refundable') >= 1) { // If 'Non Refundable' text IS NOT present, change it to this... jQuery(taoIGCOR).text("THIS IS THE NEW RATE NAME"); alert("Change the rate name"); } else { // If 'Non Refundable' text IS present don't do anything alert("There are refundable rates here....don't do anything."); } 

 .rateInfoContainer { border: 1px solid red; padding: 15px; margin-bottom:10px; } .rateName { border: 1px solid blue; padding: 15px; } .rateBullets { border: 1px solid green; padding: 15px; } .color { background: gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rateInfoContainer" data-rate-code="RATECODE"> <div class="rateName"> This text does not change <div class="rateDescription"> <ul class="rateBullets"> <li>Non Refundable</li> </ul> </div> </div> </div> <div class="parent rateInfoContainer"> <div class="textTarget rateName"> This is the target text <div class="rateDescription"> <ul class="nested rateBullets"> <li>String not present...text should change</li> </ul> </div> </div> </div> <div class="parent rateInfoContainer"> <div class="textTarget rateName"> This text does not change <div class="rateDescription"> <ul class="nested rateBullets"> <li>Non Refundable</li> </ul> </div> </div> </div> 

All help/guidance is appreciated!

• Brion

Answer 1

indexOf() returns the index position of a string within string, starting at position 0 . If the substring can't be found, it returns -1 .

So, if you want to know if "Non Refundable" is in .rateBullet , then this:

var taoRateBullet = jQuery('.rateBullet').text().indexOf('Non Refundable') <= -1;

should be this:

var taoRateBullet = jQuery('.rateBullet').text().indexOf('Non Refundable') >= -1;

And, if you want to know if "Non Refundable" is not in taoRateBullet , then this:

if (jQuery(taoRateBullet).text().indexOf('Non Refundable') >= 1) {

should be this:

if (jQuery(taoRateBullet).text().indexOf('Non Refundable') === -1) {

Now, you've also got a few other issues, so check the comments below for details inline:

 // It's a best-practice to name variables that hold JQuery wrapped sets // with a leading $ to remind you that they are not standard DOM objects. // You can also access JQuery with just "$" instead of "jQuery" var $taoIGCOR = $('.rateInfoContainer[data-rate-code="RATECODE"]'); // Check to see if there are non-refundable rates // If they are NOT refundable DO NOT change the name if ($('.rateBullet').text().indexOf('Non Refundable') === -1) { // If 'Non Refundable' text IS NOT present, change it to this... $taoIGCOR.text("THIS IS THE NEW RATE NAME"); alert("Change the rate name"); } else { // If 'Non Refundable' text IS present don't do anything alert("There are refundable rates here....don't do anything."); } 

 .rateInfoContainer { border: 1px solid red; padding: 15px; margin-bottom:10px; } .rateName { border: 1px solid blue; padding: 15px; } .rateBullets { border: 1px solid green; padding: 15px; } .color { background: gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rateInfoContainer" data-rate-code="RATECODE"> <div class="rateName"> This text does not change <div class="rateDescription"> <ul class="rateBullets"> <li>Non Refundable</li> </ul> </div> </div> </div> <div class="parent rateInfoContainer"> <div class="textTarget rateName"> This is the target text <div class="rateDescription"> <ul class="nested rateBullets"> <li>String not present...text should change</li> </ul> </div> </div> </div> <div class="parent rateInfoContainer"> <div class="textTarget rateName"> This text does not change <div class="rateDescription"> <ul class="nested rateBullets"> <li>Non Refundable</li> </ul> </div> </div> </div>