javascript - 将行为应用于具有相同类的元素中的特定 div

Question

仅当 hidden-span 等于 i-am-secret. 时，我才尝试使用 class="input" 隐藏 div。

我尝试过使用 .each(function) 或 .next() 的不同方法，但无法理解它。为了说明示例，我添加了以下代码。

请注意，我无法添加任何 ID 或类，并且行的顺序可能会有所不同。

    (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 1

我会这样遍历...

$('.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>

请更正语法错误。它应该是 class="basket__item-row"。