jquery - Applying opacity to multiple DIV classes

Question

I am working on 'OnClick' functionality in jQuery. When we click parent Div property, only parent div and its child divs should be displayed other divs should fade out.

Please find the code below. HTML:

<div>1</div>
<div class="ree">2</div>
<div class="foo">items
  <div class = "bar">Shoes
     <div class="nike">3</div>
     <div class="puma">5</div>
     <div class="gap">5</div>
  </div>
</div>
<div>4</div>

jQuery:

$('.foo').on('click',function ()
              {
$('div:not(.foo)').css('opacity','0.2')

              });

Here When I click on Div Class 'foo', Except 'foo' and its child divs like bar,nike,puma,gap div classes should be displayed and all other Div classes should fade out.

Please find the demo below,

http://jsfiddle.net/6V8hr/15/

Thanks all

Answer 1

您的:not选择器也只需要排除子 div。您可以像其他任何东西一样将多个东西放在一个非选择器中：

$('.foo').on('click', function(){
  $('div:not(.foo, .foo div)').css('opacity','0.2');
});

更新 JSFiddle：http: //jsfiddle.net/6V8hr/17/

Answer 2

。兄弟姐妹（）

$('.foo').on('click', function () {
    $(this).siblings('div').css('opacity','0.2');
});

例子

Answer 3

我相信您想淡出除.foo及其子项之外的所有 div。使用$.siblings()选择器。

$('.foo').on('click', function () {
    $(this).siblings().css('opacity','0.2')
});

• http://api.jquery.com/siblings/
• http://jsfiddle.net/6V8hr/16/

Answer 4

您没有在 foo 类 div 中放置任何值：

<div>1</div>
<div class="ree">2</div>
<div class="foo"> Value here              <-----
  <div class = "bar">Shoes
     <div class="nike">3</div>
<div class="puma">5</div>
<div class="gap">5</div>
  </div>
</div>
<div>4</div>

现在，如果您单击“此处的值”。所有的div都淡出。这是为了让你的代码生效。

---

为了实现您在问题中想要的，您需要更好地使用类匹配限定符。如其他人所述，使用 .sublings() 或 .children() 。