Question

我正在尝试使用父子关系浏览Div。以下代码有效......但我正在寻找一种正确的方法来实现它。如果有更简单的方法，请告诉我：

jQuery选择器：

$(this).parent().parent().children(".edit-box")

在$（'。edit'）中调用。点击功能：

$('.edit').click(function (e) {
            console.log($(this).parent().parent().children(".edit-box"))
            if ($(this).parent().parent().children(".edit-box").is(":hidden")){
                console.log('test')
                $(this).css({backgroundPosition: '-66px 0', width: '55px'})
                    .parents('.widget');
                $(this).parent().parent().children(".edit-box").show();
            } else {
                $(this).css({backgroundPosition: '', width: '24px'})
                    .parents('.widget');
                $(this).parent().parent().children(".edit-box").hide();
            }
            e.preventDefault();
        });

HTML：

<li class="widget color-black" id="network_map">
   <div class="widget-head" style="cursor: move;">
      <a href="#" class="collapse">COLLAPSE</a>
      <h3>Network Map</h3>
      <a href="#" class="remove">CLOSE</a><a href="#" class="edit">EDIT</a>
   </div>
   <div class="edit-box" style="display:none;">
      <ul>
         <li class="item"><label>Change the title?</label><input value="Network Map"></li>
      </ul>
<li class="item"><label>Available colors:</label><ul class="colors"><li class="color-yellow"></li><li class="color-red"></li><li class="color-blue"></li><li class="color-orange"></li><li class="color-green"></li><li class="color-black"></li></ul></li></div>
<div class="widget-content"><img src="assets/img/NetworkMap.PNG"></div>
</li>

请注意：有多个小部件有多个“.edit-box”

Answer 1

jQuery closest是您的朋友$(this).closest('#network_map')

jQuery：双父选择

1 个答案: