![](/img/trans.png)
[英]How to select parent's sibling's children with javascript (without jquery)
[英]How to target single instance of a Parent's Sibling's Children with Jquery?
我有许多具有相同类的动态(php)创建的文章。 我想单击一个按钮来定位父级兄弟姐妹的孩子。 只是那个实例。 我当前的代码正在运行, 但是 在所有文章上都显示/隐藏了'.descriptionText'div。
我该如何定位我单击的文章中包含的此类的实例?
所有代码都在下面,但主要内容是:
$(this).closest(".resultImageContainer")
.siblings(".descriptionTextContainer")
.children('.descriptionText')
.toggle("fold", 100, "linear");
我在以下问题中尝试过adivce: Here & Here 。
我的HTML:
<div class="resultImageContainer">
<div class="resultImage">
{!! HTML::image('images/gd.jpg') !!}
</div>
<!-- This is the button below: -->
<i class="fa fa-plus-square showMoreDetails"></i>
</div>
<div class="daytypeContainer">
<ul id="dayIcons">
<li>
<div class="dayCircle">
<span>M</span>
</div>
</li>
<li>
<div class="dayCircle">
<span>T</span>
</div>
</li>
</ul>
</div>
<div class="descriptionTextContainer">
<!-- This 'descriptionText' is the div I want to show/hide. -->
<div class="descriptionText">
<p>Cheesecake jujubes topping wafer donut tart sweet fruitcake.Dessert carrot cake sugar plum marzipan chocolate cotton candy marzipan danish. Cake jelly apple pie brownie pie ice cream.</p>
</div>
<div class="deetsContainer">
<div class="otherInfoContainer">
<ul id="otherInfoIcons">
<li>
<i class="fa fa-phone"></i>
<p>022132032</p>
</li>
<li>
<i class="fa fa-envelope-o"></i>
</ul>
</div>
<div class="addressContainer">
<p class="streetText">43 Ponsonby Rd</p>
<p class="cityText">AUCKLAND</p>
</div>
</div>
</div>
这是我正在使用的JQUERY:
$('.showMoreDetails').on('click touch', function(){
if ($(this).hasClass('fa-plus-square')){
$(this).removeClass('fa-plus-square');
$(this).addClass('fa-minus-square');
} else {
$(this).removeClass('fa-minus-square');
$(this).addClass('fa-plus-square');
};
$(this).closest(".resultImageContainer")
.siblings(".descriptionTextContainer")
.children('.descriptionText')
.toggle("fold", 100, "linear");
$(this).parent(".resultImageContainer").toggleClass("justTitle", 100, "linear");
});
这可能是您要寻找的:
$(this).parent()
.nextAll(".descriptionTextContainer")
.first()
.children('.descriptionText')
.toggle("fold", 100, "linear");
除非按钮的位置是动态的,否则此时您可能再次需要.closest()。 就是说,如果您对标记有任何控制权,那么有很多方法可以使您的生活更轻松。
.nextAll()。first()并不是世界上最糟糕的东西( http://jsperf.com/jquery-next-loop-vs-nextall-first/2 ),但是它仍然很脏,因为您的标记是有点奇怪。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.