如何根据类和名称属性切换动态创建的 div ？答案

【问题标题】：How to toggle dynamically created div 's on the basis of class and name attributes?如何根据类和名称属性切换动态创建的 div ？
【发布时间】：2013-10-26 07:36:56
【问题描述】：

我正在动态创建目录。

层级：

父级
- 儿童部
  - 孙子事业部

为此，我正在动态创建 div 。

然后我为这些 div 分配边距。

父级 :- 无边距

儿童部：- margin-left :15px;

孙子区：- margin-left :35px;

所以我可以动态创建目录。

问题：

我根据层次结构创建了多个父 div 和子 div。但是，如果我在第一个父 div 上应用点击事件，那么该事件也会在其他父 div 上应用，为什么因为我在类上添加点击事件。

在这次点击中，我在slideToggle(). 中遇到了问题由于我正在使用类，因此它也被应用于其他类。

例子：

$('main_div').haml(['%div.g', {id:'g_' + i', name: i}, Parent Div]);//class = 'g'

$('main_div').haml(['%div.g1', {id:'g_' + i, name: i, style:'**margin-left: 15px**;'}, Children Div]);//class = 'g1'

$('main_div').haml(['%div.g2', {id:'g_' + i, name: i, style:'**margin-left: 35px**;'}, Grand Children Div]);//class = 'g2'

在这个 div 中，'i' 值在 AJAX GET 的帮助下来自数据库。

那么我应该为slideToggle() 做哪些更改：在此我只想切换仅单击的父 div 的子项？

请问有什么提示/建议吗？

参考代码：

$('#main_div').on('click','.g', function(){
  $('#main_div').find('.g1,.g2').slideToggle();

});

【问题讨论】：

向我们展示您应用 slideToggle() 的代码
如果我没有任何子 div 但我想以父子和孙子格式排列它们，我们还有其他方法吗？

标签： jquery jquery-ui javascript-events javascript

【解决方案1】：

如果我理解正确，slideToggle() 是所有父母 div 的点击事件吗？比在函数中你可以使用'this'变量。

$(this).find(...some selector for child divs...').slide..

请显示点击事件的代码？

【讨论】：

感谢您的认可。我可以切换，但有一次我只想切换一个父母的孩子，而不是其他父母的孩子。
是的，只有一个，使用'find'在父级$(this).find('.g1').slide(); //这只会在当前父级中找到孩子
试过了，但没有切换。
我明白了。上面现在工作正常。 g 类不是 g1 类和 g2 类的父类，这就是它不起作用的原因。谢谢
如果我没有任何子 div 但我想以父子和孙子格式排列它们，我们还有其他方法吗？

【解决方案2】：

试试这个：

$('#main_div').on('click','.g', function(){
   $(this).find('.g1,.g2').slideToggle();
});

当 jQuery 调用您的点击处理程序时，它会将this 设置为被点击的项目，即.g 元素，因此仅使用$(this).find(... 将.find() 应用于该项目的后代

【讨论】：

试过了，但没有切换。
我明白了。上面现在工作正常。 g 类不是 g1 类和 g2 类的父类，这就是它不起作用的原因。谢谢
如果我没有任何子 div 但我想以父子和孙子格式排列它们，我们还有其他方法吗？
对不起，我不明白你的意思。
假设我有 3 个 div（都是主 div），并且在边距 CSS 的帮助下，我将以层次格式（如目录）添加它们。如果我点击第一个 div 那么第二个和第三个 div 的 slideToggle 是可能的吗？

【解决方案3】：

以下参考链接解决了我的问题。

On click slidetoggle div but hide others first - jQuery

也感谢其他人。

【讨论】：