Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Hide an element if another element contains certain text

We want the "Apply for this Fund" button disabled when the Fund Details has Status: Closed, like this: https://i.imgur.com/otHCrxo.png.

The problem we have is that when Status has "Open", even then, the Apply for this Fund (#btn-apply) will be hidden.

So :contains('Closed') is not working properly for some reason.

(function($){
    $(document).ready(function($){
        setTimeout(function () {
            if($("#fund-details .listing_detail.col-md-4.status:contains('Closed')")) {
                $("#btn-apply").hide();
            };
        }, 1000);
    });
})( jQuery );
<div id="fund-details">
  <div class="listing_detail col-md-4 status text-green"><strong>Status:</strong> Open</div>
</div>

<div class="elementor-element elementor-element-3ebb592 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="3ebb592" data-element_type="widget" id="btn-apply" data-widget_type="button.default" style="display: none;">
    <div class="elementor-widget-container">
      <div class="elementor-button-wrapper">
          <a class="elementor-button elementor-button-link elementor-size-md elementor-animation-push" href="http://applications.silcgroup.com/the-silc-group/mosaic-capital-fund.php" o-123link="">
                <span class="elementor-button-content-wrapper">
                  <span class="elementor-button-text">Apply for this                                                            Fund</span>
                </span>
          </a>
      </div>
    </div>
</div>
<div class="elementor-element elementor-element-650b37c7 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="650b37c7" data-element_type="widget" data-widget_type="button.default">
                <div class="elementor-widget-container">
                    <div class="elementor-button-wrapper">
                   <a class="elementor-button elementor-button-link elementor-size-md elementor-animation-push" href="https://silcgroup.com/" o-123link="">
               <span class="elementor-button-content-wrapper">
                <span class="elementor-button-text">Fund Manager</span>
              </span>
                    </a>
        </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Tags:

2

Answers


  1. 0

    There are a few things wrong with your code:

    1. You don’t do the reverse but initially you hide the button, you need to show this in your else statement.

    2. It’s a bit safer to use jQuery to get the text vs css contains, as this is more widely supported.

    As clarified in the comments, it IS safe to use as jQuery ensures cross-browser compatibility. This is just another approach how you could get text out of your selected element.

    (function($){
    $(document).ready(function($){
        setTimeout(function () {
            if($("#fund-details .listing_detail.col-md-4.status").first().text() === 'Status: Closed') {
                $("#btn-apply").hide();
            } else {
                $("#btn-apply").show();
            }
        }, 1000);
    });
})( jQuery );
    <div id="fund-details">
  <div class="listing_detail col-md-4 status text-green"><strong>Status:</strong> Open</div>
</div>

<div class="elementor-element elementor-element-3ebb592 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="3ebb592" data-element_type="widget" id="btn-apply" data-widget_type="button.default" style="display: none;">
    <div class="elementor-widget-container">
      <div class="elementor-button-wrapper">
          <a class="elementor-button elementor-button-link elementor-size-md elementor-animation-push" href="http://applications.silcgroup.com/the-silc-group/mosaic-capital-fund.php" o-123link="">
                <span class="elementor-button-content-wrapper">
                  <span class="elementor-button-text">Apply for this                                                            Fund</span>
                </span>
          </a>
      </div>
    </div>
</div>
<div class="elementor-element elementor-element-650b37c7 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="650b37c7" data-element_type="widget" data-widget_type="button.default">
                <div class="elementor-widget-container">
                    <div class="elementor-button-wrapper">
                   <a class="elementor-button elementor-button-link elementor-size-md elementor-animation-push" href="https://silcgroup.com/" o-123link="">
               <span class="elementor-button-content-wrapper">
                <span class="elementor-button-text">Fund Manager</span>
              </span>
                    </a>
        </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    Login or Signup to reply.
  2. 0

    The id="btn-apply" element has style="display: none;" in the HTML, so it’s not going to be visible until/unless you have code that removes that (perhaps via a show call). You might also look at toggle which you can pass a boolean into. In all of those cases, though, I’d suggest showing and hiding using a class, not inline CSS, and I’d do it on some kind of action (page load, something changing, etc.) rather than on a timer.

    Also, $("#fund-details .listing_detail.col-md-4.status:contains('Closed')") returns a jQuery object, which is always truthy, not a flag. You could remove the CSS pseudo-class and get the text, then use includes on it. (Or check .length, which will be 0 if no elements matched.)

    Here’s a minimal-changes example using toggle:

    (function($){
    $(document).ready(function($){
        setTimeout(function () {
            const closed = $("#fund-details .listing_detail.col-md-4.status").text().includes("Closed");
            $("#btn-apply").toggle(!closed);
        }, 1000);
    });
})( jQuery );
    <div id="fund-details">
  <div class="listing_detail col-md-4 status text-green"><strong>Status:</strong> Open</div>
</div>

<div class="elementor-element elementor-element-3ebb592 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="3ebb592" data-element_type="widget" id="btn-apply" data-widget_type="button.default" style="display: none;">
    <div class="elementor-widget-container">
      <div class="elementor-button-wrapper">
          <a class="elementor-button elementor-button-link elementor-size-md elementor-animation-push" href="http://applications.silcgroup.com/the-silc-group/mosaic-capital-fund.php" o-123link="">
                <span class="elementor-button-content-wrapper">
                  <span class="elementor-button-text">Apply for this                                                            Fund</span>
                </span>
          </a>
      </div>
    </div>
</div>
<div class="elementor-element elementor-element-650b37c7 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="650b37c7" data-element_type="widget" data-widget_type="button.default">
                <div class="elementor-widget-container">
                    <div class="elementor-button-wrapper">
                   <a class="elementor-button elementor-button-link elementor-size-md elementor-animation-push" href="https://silcgroup.com/" o-123link="">
               <span class="elementor-button-content-wrapper">
                <span class="elementor-button-text">Fund Manager</span>
              </span>
                    </a>
        </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    But again, I really wouldn’t do this on a timer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search