jQuery搜索文本并隐藏嵌套跨度

Question

我有这段html代码，想象一下我有不同的div和相同的结构:

我基本上是在span“ld-item-title”（在这里可以看到课程01）中搜索文本“2020”，但没有成功。 即使在span“ld-item-component-progress”的第二个类中，它也会继续搜索文本。

我想要获得的是:

if (in span "ld-item-title" there is "2020") {
    hide span "ld-item-component-progress";
}

null

<div class="ld-item-list-item ld-item-list-item-course ld-expandable learndash-incomplete" id="ld-course-list-item-638">
  <div class="ld-item-list-item-preview">
    <a href="link" class="ld-item-name">
      <div class="ld-status-icon ld-status-incomplete"></div> 
        <span class="ld-item-title">Course 01
         <span class="ld-item-components">
          <span class="ld-item-component-progress">0% Completed</span>
          <span class="ld-sep">|</span>          
          <span class="ld-item-component-steps">0/13 Steps</span>
          <span class="ld-sep">|</span>
          <span class="ld-item-component-since">01/06/2020 09:20</span> 
        </span>
      </span>
    </a>
    <!--/.ld-course-name-->

  </div>
  <!--/.ld-course-preview-->
</div>

<div class="ld-item-list-item ld-item-list-item-course ld-expandable learndash-incomplete" id="ld-course-list-item-74">
<div class="ld-item-list-item-preview">

    <a href="link" class="ld-item-name">
        <div class="ld-status-icon ld-status-incomplete"></div>         <span class="ld-item-title">
            Course Design 2020              <span class="ld-item-components">
                                        <span class="ld-item-component-progress" style="display: none;">
                        0% Completed                        </span>
                                                <span class="ld-sep">|</span>
                                                <span class="ld-item-component-steps">
                        0/11 Steps                      </span>
                                                <span class="ld-sep">|</span>
                                                <span class="ld-item-component-since">
                        26/06/2020 15:12                        </span>
                                    </span>
        </span>
    </a> <!--/.ld-course-name-->

</div> <!--/.ld-course-preview-->
</div>

null

这是我在执行类似任务时使用的代码

(function($) {
     $(document).ready(function(){
         //if item preview contains the term "2020"
         $('.ld-item-list-item-preview').each(function(){
                if($(this).is(":contains('2020')")){
                    // hide children div .ld-item-details
                    $(this).children(".ld-item-details").hide();
                }
            });  
     });
    })(jQuery);

这是针对不同的html结构，但逻辑是相同的

Answer 1

你是说像这样？

你知道ld-item-title包含嵌套跨度的所有文本吗？

如果您只想要那个文本，那么您需要查看DOM文本节点:

null

$(".ld-item-title").each(function() {
  const textNode = $(this)[0].textContent.split("\n")[0]
  console.log(textNode)
  $(this).find(".ld-item-components").toggle(!textNode.includes("2020"))
})

span::after {
  content: "\A";
  white-space: pre;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ld-item-list-item ld-item-list-item-course ld-expandable learndash-incomplete" id="ld-course-list-item-638">
  <div class="ld-item-list-item-preview">
    <a href="link" class="ld-item-name">
      <div class="ld-status-icon ld-status-incomplete">
      </div>
      <span class="ld-item-title">Course 01
        <span class="ld-item-components">
          <span class="ld-item-component-progress">0%</span>
          <span class="ld-sep">|</span>
          <span class="ld-item-component-steps">0/13 Steps</span>
          <span class="ld-sep">|</span>
          <span class="ld-item-component-since">01/06/2020 09:20</span>
        </span>
      </span>
    </a>
    <!--/.ld-course-name-->
  </div>
  <!--/.ld-course-preview-->
</div>
<div class="ld-item-list-item ld-item-list-item-course ld-expandable learndash-incomplete" id="ld-course-list-item-74">
  <div class="ld-item-list-item-preview">
    <a href="link" class="ld-item-name">
      <div class="ld-status-icon ld-status-incomplete"></div>
      <span class="ld-item-title">Course Design 2020
        <span class="ld-item-components">
          <span class="ld-item-component-progress">0% Completed</span>
          <span class="ld-sep">|</span>
          <span class="ld-item-component-steps">0/11 Steps</span>
          <span class="ld-sep">|</span>
          <span class="ld-item-component-since">26/06/2020 15:12</span>
        </span>
      </span>
    </a>
    <!--/.ld-course-name-->
  </div>
  <!--/.ld-course-preview-->
</div>