javascript - 访问没有 ID 的元素的父元素

Question

如何获取值为 WAN 的 li 的父级无需使用 ID？我已经尝试过使用 $(this).parent().parent();在 onclick对于input但它只返回点击的 li .

<li>
   <span class="expanded">-</span>
   <input type="checkbox" name="Application Integration">Application Integration
   <ul class="">
      <li>
         <span class="expanded">-</span>
         <input type="checkbox" name="Windows">Windows
         <ul class="">
            <li>
               <span class="expanded">-</span>
               <input type="checkbox" name="Leitungen">Leitungen
               <ul class="">
                  <li><span>&nbsp;</span><input type="checkbox" name="WAN">WAN</li>
                  <li><span>&nbsp;</span><input type="checkbox" name="Mail">Mail</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</li>

我如何访问整个构造(从 <input type="checkbox" name="Application Integration">Application Integration 开始)？

非常感谢您的任何建议。

Answer 1

你想要这样的东西吗？

$('[name="Application Integration"]').on('click', function(){
   $(this).closest('li').find('[name="WAN"]').closest('li').addClass('xxx');
});

.xxx {
    border: solid 3px orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
   <span class="expanded">-</span>
   <input type="checkbox" name="Application Integration">Application Integration
   <ul class="">
      <li>
         <span class="expanded">-</span>
         <input type="checkbox" name="Windows">Windows
         <ul class="">
            <li>
               <span class="expanded">-</span>
               <input type="checkbox" name="Leitungen">Leitungen
               <ul class="">
                  <li><span>&nbsp;</span><input type="checkbox" name="WAN">WAN</li>
                  <li><span>&nbsp;</span><input type="checkbox" name="Mail">Mail</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</li>

反之亦然

$('[type="checkbox"]').on('click', function(){
   $(this).parents('li').last().children('input').not($(this)).prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
   <span class="expanded">-</span>
   <input type="checkbox" name="Application Integration">Application Integration
   <ul class="">
      <li>
         <span class="expanded">-</span>
         <input type="checkbox" name="Windows">Windows
         <ul class="">
            <li>
               <span class="expanded">-</span>
               <input type="checkbox" name="Leitungen">Leitungen
               <ul class="">
                  <li><span>&nbsp;</span><input type="checkbox" name="WAN">WAN</li>
                  <li><span>&nbsp;</span><input type="checkbox" name="Mail">Mail</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</li>