CODEWITHSUNDEEP
javascriptjqueryhtml
John
John

Reputation: 619

Applying behavior to specific div within elements with same class

I am trying to hide div with class="input" only when hidden-span is equal to i-am-secret.

I've tried different approaches using .each(function) or .next() but could not get my head around it. In order to illustrate the example I've added the code bellow.

Please note that I can not add any id's or classes and the order of the rows may vary.

    (function($) {
      $('.basket__item-row').each(function() {
        if ($('.hidden-span').is(":contains('i-am-secret')")) {
          $(this).next().hide();
        }
      });
    })(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
  <div class="image">
    <div>
     I am normal div
    </div>
  </div>
  <div class="input">
    Please hide me
  </div>
</div>
<div class="basket__item-row">
  <div class="image">
    <div>
      I am extra div
      <span class="hidden-span">i-am-secret</span>
    </div>
  </div>
  <div class="input">
    Please hide me
  </div>
</div>
<div class="basket__item-row">
  <div class="image">
    <div>
     I am normal div
     <span class="hidden-span">another class</span>
    </div>
  </div>
  <div class="input">
    Please hide me
  </div>
</div>

Upvotes: 1

Views: 78

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

I would do a traversal this way...

$('.hidden-span')    // Target all the hidden spans.
  .filter(function () {  // Filter all the span that contains the text.
    return $(this).text().indexOf("i-am-secret") !== false;
  })
  .closest(".image") // Get the parent `.image`.
  .next(".input")    // Get the `.input` which is its sibling.
  .hide();           // Hide it.


(function($) {
  $('.hidden-span').filter(function () {
    return $(this).text().indexOf("i-am-secret") !== false;
  }).closest(".image").next(".input").hide();
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
  <div class="image">
    <div>
      I am normal div
    </div>
  </div>
  <div class="input">
    Please hide me
  </div>
</div>
<div class="basket__item-row">
  <div class="image">
    <div>
      I am extra div
      <span class="hidden-span">i-am-secret</span>
    </div>
  </div>
  <div class="input">
    Please hide me
  </div>
</div>
<div class="basket__item-row">
  <div class="image">
    <div>
      I am normal div
    </div>
  </div>
  <div class="input">
    Please hide me
  </div>
</div>

Please correct the syntax errors. It should be class="basket__item-row".

Upvotes: 2

Related Questions