如果此函数可以判断所选元素是否存在于被单击元素的父元素中我需要帮助调试

问题描述

我正在为Google跟踪代码管理器设置此变量。 {{Click Element}}返回的元素让我们说“ ul”。我想用"li"查找父元素，在元素中，我想搜索div.icon-lock是否是后代。当前代码未返回正确的结果。任何人都可以指出错误或提出更好的方法吗？

function(){ 
  
  
var ul = {{Click Element}};
var el =( $("ul").closest("li"))

  
if ( $("el div").hasClass("icon-lock") ) { 

   return true
  }
 else {
 
  return false

}   

}

我正在使用函数的HTML代码之一

<li _ngcontent-bvv-c8="" tabindex="0" id="5f2abd67d480440d11d7cec1">
  <div _ngcontent-bvv-c8="" class="cie-accordion-heading">
  <!---->
    <span _ngcontent-bvv-c8="" class="badge-red mr-3">Live Class
    </span>
<!---->Class on Series &amp; Patterns - 1
  </div>
  <div _ngcontent-bvv-c8="" class="cie-accordion-item flex-post">
  <!---->
    <div _ngcontent-bvv-c8="" class="flex-post-pic">
    <!---->
    <img _ngcontent-bvv-c8="" alt="video-img" src="angular/assets/img/course-experience/course-video.svg">
    <!---->
    <!---->
    <!---->
    <!---->
    </div>
 <div _ngcontent-bvv-c8="" class="flex-post-content text-light-sm text-truncate">
 <!---->
 <!---->
 <!---->
  <span _ngcontent-bvv-c8="">81 mins
  </span>
 <!---->
 <!---->
  <span _ngcontent-bvv-c8="" class="px-3">|
  </span>
  <span _ngcontent-bvv-c8="" class="text-light-sm">Was live on Aug 21
  </span>
 </div>
<!---->
 <div _ngcontent-bvv-c8="" class="icon-lock">
 </div>
</div>

解决方法

通过获取主div包装器来搜索该类，然后搜索其后代类。

function hasIconLockClass() {
  const iconLock = document.querySelector('ul li div .icon-lock');
  if (!iconLock) return false
  return true
}

console.log(hasIconLockClass())

<ul>


  <li _ngcontent-bvv-c8="" tabindex="0" id="5f2abd67d480440d11d7cec1">
    <div _ngcontent-bvv-c8="" class="cie-accordion-heading">
      <!---->
      <span _ngcontent-bvv-c8="" class="badge-red mr-3">Live Class
      </span>
      <!---->Class on Series &amp; Patterns - 1
    </div>
    <div _ngcontent-bvv-c8="" class="cie-accordion-item flex-post">
      <!---->
      <div _ngcontent-bvv-c8="" class="flex-post-pic">
        <!---->
        <img _ngcontent-bvv-c8="" alt="video-img" src="angular/assets/img/course-experience/course-video.svg">
        <!---->
        <!---->
        <!---->
        <!---->
      </div>
      <div _ngcontent-bvv-c8="" class="flex-post-content text-light-sm text-truncate">
        <!---->
        <!---->
        <!---->
        <span _ngcontent-bvv-c8="">81 mins
        </span>
        <!---->
        <!---->
        <span _ngcontent-bvv-c8="" class="px-3">|
        </span>
        <span _ngcontent-bvv-c8="" class="text-light-sm">Was live on Aug 21
        </span>
      </div>
      <!---->
      <div _ngcontent-bvv-c8="" class="icon-lock">
      </div>
    </div>

  </li>

</ul>