Question

我有一个看起来像这样的结构：

<div>
 <h3>Hello World</h3>
 <p>Hello</p>
 <ul>
   <li>1</li>
   <li>2</li>
 </ul>
</div>

如果我点击<h3>Hello World</h3>，我的问题就是我如何让这个 div中的ul发生一些事情，而不是在另一个div中？

这是一个来自h3或孩子的兄弟吗？

$(h3).clicked(function(){
 $(this).???.slideDown();
});

Answer 1

带jquery的兄弟姐妹：

   $('h3').on('click', function(){
     $(this).siblings('ul').slideDown();
    });

Answer 2

    $('h3').click(
        function(event)
       { 
            $(event.target).parent().find('ul li').slideDown();
       }
    );

如果ul和li是动态元素，则必须使用on。

Answer 3

尝试这个...我无法让它动画，虽然我根据您的要求通过选择器添加了警报。

 $(document).ready(function(){
 $('body div').each(function(){
	H3div = $(this);
	$('h3', H3div).on('click', function(){
      var demo_alert = $('ul', H3div).text();
      alert(demo_alert);
	});
 });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div>
 <h3>Hello World</h3>
 <p>Hello</p>
 <ul>
   <li>1</li>
   <li>2</li>
 </ul>
</div>
</body>

Answer 4

您可以使用nextAll()和first()的组合来定位相关的ul。

$('h3').on('click', function() {
   $(this).nextAll('ul').first().slideDown();
});

ul这里是h3元素的兄弟，因为它们处于同一级别的层次结构中。

如何在Jquery中选择它？

4 个答案: