检查多个div以查看是否存在h3

Question

我正在尝试检查.menu-section的每个实例，以查看.menu-title div是否包含h3标题。如果是这样，它将输出适当的console.log消息。从逻辑上来说，我无法弄清楚哪里出了问题，这在我看来似乎很有意义。任何帮助都会很棒。

$(".menu-section").each(function() {
  if ($('.menu-title h3').length) {
    console.log("menu-title h3 exists");
  } else {
    console.log("menu-title h3 does not exist");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
  <div class="menu-wrapper nav-spacer">
    <div class="menu-container content-container">
      <ul class="menu-section">
        <li>
          <a class="menu-title menu-item">
            <h3>PLUS SIZE &amp; CURVE</h3>
          </a>
        </li>
      </ul>
      <ul class="menu-section">
        <li>
          <a class="menu-title menu-item">
            <h3>PETITE</h3>
          </a>
        </li>
      </ul>
      <ul class="menu-section">
        <li>
          <a class="menu-title menu-item"></a>
        </li>
      </ul>
      <ul class="menu-section">
        <li>
          <a class="menu-title menu-item"></a>
        </li>
      </ul>
    </div>
  </div>
</section>

工作代码笔：https://codepen.io/nickelse/pen/zQExRd?editors=1111

Answer 1

问题是因为您正在查看.menu-title循环中的 all each()个元素，而不仅仅是当前.menu-section元素中的那个。您需要使用this关键字来引用当前元素，然后使用find()来查找所需的元素：

$(".menu-section").each(function() {
  if ($(this).find('.menu-title h3').length) {
    console.log("menu-title h3 exists");
  } else {
    console.log("menu-title h3 does not exist");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
  <div class="menu-wrapper nav-spacer">
    <div class="menu-container content-container">
      <ul class="menu-section">
        <li>
          <a class="menu-title menu-item">
            <h3>PLUS SIZE &amp; CURVE</h3>
          </a>
        </li>
      </ul>
      <ul class="menu-section">
        <li>
          <a class="menu-title menu-item">
            <h3>PETITE</h3>
          </a>
        </li>
      </ul>
      <ul class="menu-section">
        <li>
          <a class="menu-title menu-item"></a>
        </li>
      </ul>
      <ul class="menu-section">
        <li>
          <a class="menu-title menu-item"></a>
        </li>
      </ul>
    </div>
  </div>
</section>