Question

我的页面上有一些JavaScript生成的HTML代码。相同HTML代码的多个部分/实例正在生成并填充到页面中。使用名为openrole的CSS类隐藏每个HTML部分中的DIV之一。我需要从下一个openrole DIV中删除隐藏属性，然后在DIV上执行slideToggle()。单击一个Class元素时，我试图找到openrole类的下一个元素，但运气不好。

我已经浏览并测试了许多替代方案，但仍然没有运气。我希望有人可以在这里指示正确的方向。

$('#role_info').append(
  '<li>' +
  '<a href="javascript:void(0)">' +
  '<i class="menu-icon fa fa-file-text-o bg-yellow"></i>' +
  '<div class="menu-info">' +
  '<h4 class="control-sidebar-subheading applicantinfo">' + papplicant + plusicon + '</h4>' +
  '<p >' + prole + '</p>' +
  '</div>' +
  '</a>' +
  '<div class="col-md-12 openrole">' +
  '<div class="col-md-6">' +
  '<p class="text-left standard-text">Selskapsinformasjon</p>' +
  '<p id="company_address" class="text-left standard-text"><i class=" icon-padding fa fa-home"></i></p>' +
  '<p id="company_phone" class="text-left standard-text"><i class=" icon-padding fa fa-phone"></i></p>' +
  '<p id="company_email" class="text-left standard-text"><i class=" icon-padding fa fa-envelope"></i></p>' +
  '</div>' +
  '<div class="col-md-6">' +
  '<p class="text-left standard-text">Kontaktperson</p>' +
  '<p id="contact_name" class="text-left standard-text"><i class=" icon-padding fa fa-user"></i></p>' +
  '<p id="contact_phone" class="text-left standard-text"><i class=" icon-padding fa fa-phone"></i></p>' +
  '<p id="contact_email" class="text-left standard-text"><i class=" icon-padding fa fa-envelope"></i></p>' +
  '<div>' +
  '</div>' +
  '</li>'
)
$(document).on('click', '.applicantinfo', function() {

  $(this).closest('.openrole').slideToggle();

});

.openrole {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="role_info" class="control-sidebar-menu">
</ul>

控制台中未生成任何错误消息。我想我只是无法根据我的HTML结构弄清楚如何编写正确的JavaScript代码

Answer 1

您的代码应该是这样的

$(this).closest('li').find('.openrole').slideToggle();

closest检查祖先。

Answer 2

closest()在DOM树中遍历其祖先。使用parent查找如下元素。

所以在您的情况下：

$(document).on('click', '.applicantinfo', function () {
   $(this).parent('li').find('.openrole').slideToggle();
});

单击class元素时，为什么jQuery'closest'不能正常工作

2 个答案: