Question

我正在尝试检查特定div.class的存在以及它是否存在，然后在父级别中隐藏-p-元素。

所以在下面的代码中，我想说：如果此脚本中不存在ul类元素'dfwp-list'，则不要显示p类元素'linksectionHeading'。

（代码在我的页面中使用了多个位置，有些具有UL列表元素“dfwp-column”而其他没有。所以我不希望标题显示没有列表的位置）

<div class="linksHolder">
  <p class="linksectionHeading">Most popular items   
  </p>
      <div>    
        <div class="slm-layout-main slwpmarker">                         
          <div class="dfwp-column">
             <ul class="dfwp-list">
               <li>item1</li>
               <li>item2</li>
               <li>item3</li>
             </ul>
           </div>
        </div>
    </div>
</div>

我尝试了很多技术（如下所示），但要么删除了我的-p-tag的所有迭代，要么根本不起作用：

$(document).ready(function(){
$('.linkSectionHeading').hide();
          if ($('.slwpmarker').has('div.dfwp-column'))
            {
            $(".linkSectionHeading").show();
            }   
});

请咨询

Answer 1

根据@Taplar的建议尝试

$(document).ready(function(){
    $('.linkSectionHeading').hide();
      if ($('.slwpmarker').has('div.dfwp-column').length){
        $(".linkSectionHeading").show();
      }   
});

Answer 2

首先请注意，HTML中的类具有小写s，应将其更正为linkSectionHeading，以便JS正确选择它。

也就是说，要解决逻辑中的问题，您需要循环遍历所有p元素，然后检查它们是否具有相关的.dfwp-column元素并隐藏/显示它们。您可以使用DOM遍历和toggle()方法来执行此操作。试试这个，请注意中间的HTML结构删除了p：

$('.linkSectionHeading').each(function() {
  var $dfwpColumn = $(this).closest('.linksHolder').find('div.dfwp-column');
  $(this).toggle($dfwpColumn.length > 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="linksHolder">
  <p class="linkSectionHeading">Most popular items</p>
  <div>
    <div class="slm-layout-main slwpmarker">
      <div class="dfwp-column">
        <ul class="dfwp-list">
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="linksHolder">
  <p class="linkSectionHeading">Most popular items</p>
  <div>
    <div class="slm-layout-main slwpmarker"></div>
  </div>
</div>
<div class="linksHolder">
  <p class="linkSectionHeading">Most popular items</p>
  <div>
    <div class="slm-layout-main slwpmarker">
      <div class="dfwp-column">
        <ul class="dfwp-list">
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

如果页面中没有列表，则隐藏p标签

2 个答案: