John John - 1 month ago 10
Javascript Question

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>




Answer

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".