在 jquery 中隐藏 DOM 个对象，但由其他对象决定

Question

如果 div 包含文本 [=15]，我如何使用 jQuery 隐藏带有 class .morelink_L3 的 link =] 少于 550 个字符？

这个 div 没有 class 或 id 这一事实让我觉得很棘手。有使用 find() 的选项，但是当我使用它时它不起作用。这是我试过的：

if ($(".story_L3 > div").text().trim().length < 550) {
  $('.morelink_L3').hide();
}

<div class="row">
  <div  "l3-details">
    <div class="story_L3">
      <div>Section Description</div>
      <div>We understand things change in life and at work and we want to make sure you’re ready for anything. We have a host of information available to help you understand what you need to do and how we can support you through any change.</div>
    </div>
    <span class="morelink_L3" value="True">Read More</span>
  </div>
</div>

Answer 1

您可以使用 :eq() 通过元素在其父元素中的索引来定位元素。在这种情况下，第二个 div 将是 :eq(1)。试试这个：

if ($(".story_L3 > div:eq(1)").text().trim().length < 550) {
  $('.morelink_L3').hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div "l3-details">
    <div class="story_L3">
      <div>Section Description</div>
      <div>We understand things change in life and at work and we want to make sure you’re ready for anything. We have a host of information available to help you understand what you need to do and how we can support you through any change.</div>
    </div>
    <span class="morelink_L3" value="True">Read More</span>
  </div>
</div>

另请注意，您可以对 toggle() 进行一次调用，为 hide/show 相关元素提供布尔条件：

$('.morelink_L3').toggle($(".story_L3 > div:eq(1)").text().trim().length > 550);

Answer 2

你应该使用.filter() to get the story_L3 matching the condition then target immediately following morelink_L3 sibling using .next()

并使用:eq(index) selector / .eq(index)方法定位第二个div

$(".story_L3").filter(function() {
  return $(this).children('div:eq(1)').text().trim().length < 550
}).next('.morelink_L3').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div "l3-details">
    <div class="story_L3">
      <div>Section Description</div>
      <div>We understand things change in life and at work and we want to make sure you’re ready for anything. We have a host of information available to help you understand what you need to do and how we can support you through any change.</div>
    </div>
    <span class="morelink_L3" value="True">Read More</span>
  </div>
</div>

在 jquery 中隐藏 DOM 个对象，但由其他对象决定

Hide DOM object in jquery but determined by other object

jquery

hide