Question

好吧所以我慢慢学习jquery，需要一些帮助，我环顾四周，尝试了一些没有运气的东西。无论如何我有这样的html dom结构：

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'> </div
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'> </div>
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'> </div>
   </div>
</div>

我想要完成的是当我点击（1,2,3 all）我的jquery节目中的一个按钮时只有foo内的相应类或所有类中的相应类。示例：我单击按钮1，dom看起来像这样

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'> 
   </div>
</div>

现在我已经尝试使用以下命令执行此操作，我已经从解决方案中找到了SO上的其他类似帖子，但没有运气:(我所有案例都有效，但没有个案）

 $("#foo").find(".1").fadeOut();
 $("#foo  .1").fadeOut();
 $("#foo > .1").fadeOut();
 $("#foo,  .1").fadeOut(); // this just fades out all of foo

那我该怎么做呢？所以我得到了我想要的结果，或者我错过了某个地方的主要概念，这是不可能的？

关于编辑的注意事项：我已编辑正确关闭div ...这是我意外做的事情，因为示例从整个代码中大大简化了

Answer 1

我会给你的按钮一些课（比如btn）来表示一组元素：

<div id='foo'>
   <div class='btn 1'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='btn 2'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='btn 3'>
       <div class='a'></div><div class='b'></div>
   </div>
</div>

然后你可以写：

 $(document).ready(function(){
    $('#foo .a').hide();

    var $btn = $('#foo > .btn');
    $('#foo').on('click', '.btn', function() {
        $btn.find('.a').fadeOut();
        $(this).find('.a').fadeIn();
    });
});

http://jsfiddle.net/TUnB2/

我的jquery show只是里面的相应类

关键的想法是使用选择器的上下文来缩小所选元素的数量：

$(this).find('.a')

Answer 2

标记中有几个未闭合的div标签，这将影响淡入淡出。

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'></div> <!-- missing div -->
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'></div> <!-- missing div --> 
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'> </div> <!-- missing div -->
   </div>
</div>

固定标记后，我们可以添加按钮：

<强> HTML

<div id='foo'>
   <div class='1'>
       <div class='a'>a1</div><div class='b'>b1</div>
   </div>
   <div class='2'>
       <div class='a'>a2</div><div class='b'>b2</div>
   </div>
   <div class='3'>
       <div class='a'>a3</div><div class='b'>b3</div>
   </div>
</div>
<button class="toggle">Show 1</button>
<button class="toggle">Show 2</button>
<button class="toggle">Show 3</button>

然后切换它们的脚本

<强>的Javascript

$("button.toggle").click(function(){
    $("#foo>div:not('." + $(this).index()+"')").fadeOut();
});

/ *请注意，这取决于按* * /

顺序放置的按钮

工作示例 http://jsfiddle.net/5vzCe/1/

Answer 3

嗯，虽然我不确定你在第一次点击后如何切换可见性......

$('.a').click(function(){
    $('#foo > div').not($(this).parent()).remove();
});

另外。修复那些在您打开</div>元素后关闭<div class='b'>代码的人。

Answer 4

似乎你的b级的div没有被关闭。尝试关闭它们，看看你是否得到任何结果。

这是关闭标签：

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'></div>
   </div>
</div>

另外，你需要告诉jquery听你点击那些按钮。

以下是一个示例jquery点击事件：

$("#foo .1").click(function () {
     $("div", this).fadeIn();
});

这个片段将找到foo 1中的所有div，并使它们成为淡入淡出。

让我知道这对你有用，我还没有测试过。

-GUI

jquery选择嵌套在另一个类中的类

4 个答案: