简体   繁体   中英

How would I select all div classes with the same name except the one in the current div with jquery/javascript?

I have this code:

<div class="pvh_wrap">

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

</div><!-- end .pvh_wrap -->

What I want to do is when the pvh_button is clicked, the pvh_overlay divs are shown except the one in the current div. The current div would be the pvh_item class that the pvh_button was clicked in. I have this so far which turns on all the pvh_overlay's by setting them to display: inline, but I want all except the current one to turn on. How would I do this?

<script>
$('.pvh_button').click(function(event) {
    $('.pvh_overlay').css('display', 'inline');     
});
</script>

Thanks.

$('.pvh_button').click(function(event) {
    var $currentContainerOverlay = $(this).parent().children('.pvh_overlay');
    $('.pvh_overlay').not($currentContainerOverlay).css('display', 'inline');     
});

Probably less parsing needed with siblings() method. Could be faster if you are parsing huge HTML structure.

$('.pvh_button').click(function(event) {
    $('.pvh_overlay').not($(this).siblings('.pvh_overlay')).css( {'display':'inline' });    
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM