Javascript 如何从父div计算子div长度；使用类名；在JQuery中？

父div的类名为“panel”

它包含更多的子div，它们的类名为“clonablePart”，还有一个按钮

我们需要检查一下

1） 如果有多个clonablePart，则默认禁用的按钮应变为启用

2） 如果有一个可关闭部件，则按钮应保持禁用状态

注意：父div面板中的类名“panel”；也可以存在于其子div中。“输入”也可以是多个

有关HTML结构的更多详细信息，请参见fiddle。

以下是正在使用的JQuery：

$('.myclass').each(function () {
        var lengthOfClones = $(this).closest('div.panel').find('.clonablePart').length;
        var typeOfClone = $(this).data("type");
        console.log('Length of Clones:' + typeOfClone + " - " + lengthOfClones); 
        lengthOfClones > 1 ? $('#delete' + typeOfClone).attr('disabled', false) : $('#delete' + typeOfClone).attr('disabled', true);
    });

如果有不清楚的地方，请写下来

以下是一个想法的HTML：

<div id="Bank_panel" class="panel">
<div id="Bank_panel1" class="clonablePart">
    1) Bank Account
</div>
<div id="Bank_panel1" class="clonablePart">
    2) Account Name
</div>
<input type="button" value="delete" id="deleteBank"  data-type="Bank" disabled /> <i> Make it Enable onload as it have two values</i>
</div>

1） 银行账户
2） 帐户名
使其启用onload，因为它有两个值

如果每个

面板

类只有一个

输入

子类，则可以将其作为目标：

$(this).find('input')

在您的代码中，这将给出：

 lengthOfClones > 1 ? $(this).find('input').attr('disabled', false) : $(this).find('input').attr('disabled', true);

编辑

如果每个面板有多个输入子级，则可以找到唯一属性并将其作为目标。例如：

$(this).find('input[type=button]')

---

这将解决您在小提琴中提出的问题：

$('.panel').each(function () {
    // Find the button with a value of `delete`
    var button   = $(this).find("input[value='delete']");
    var clones   = $(this).find('.clonablePart');
    if(clones.length > 1) 
        button.removeAttr('disabled')
    else 
        button.attr('disabled', true) ;
});

诀窍是：您只希望对孩子进行计数，所以请使用

.find（）

。然后，找到包装器中的按钮，并根据找到的结果数量启用和禁用该按钮

//将仅使用外部面板
$（'.panel'）。每个（函数（）{
var按钮=$（this）.find（“输入[value='delete']”）；
var clones=$（this.find（'.clonablePart'）；
变量类型=按钮数据（“类型”）；
如果（克隆长度>1）
按钮。removeAttr（“已禁用”）
其他的
button.attr（'disabled'，true）；
});

1） 银行账户
2） 帐户名
使其启用onload，因为它有两个值


1） 保险帐户
2） 保险名称
使其启用onload，因为它有两个值


1） 经济账户
保持禁用状态
您的代码中有问题
$（this）.data（“type”）
总是返回克隆，这是不正确的

因此，为
.panel
下的每个
div
指定一个自定义属性
数据类型
，例如为银行，指定
数据类型=“银行”
，依此类推

因此HTML变成：

<div id="Bank_panel" class="panel" data-type="Bank">
    <div id="Bank_panel1" class="clonablePart">
        1) Bank Account
    </div>
    <div id="Bank_panel1" class="clonablePart">
        2) Account Name
    </div>
    <input type="button" value="delete" id="deleteBank"  data-type="Bank" disabled /> <i> Make it Enable onload as it have two values</i>
</div>
<br/>
<div id="insurance_panel" class="panel" data-type="Insurance">
    <div id="insurance_panel1" class="clonablePart">
        1) Insurance Account
    </div>
    <div id="insurance_panel1" class="clonablePart">
        2) Insurance Name
    </div>



    <input type="button" value="delete" id="deleteInsurance" data-type="insurance" disabled /> <i> Make it Enable onload as it have two values</i>
</div>

<br/>
<div id="economy_panel" class="panel" data-type="economy">
    <div id="economy_panel1" class="clonablePart">
        1) Economy Account
    </div>
    <input type="button" value="delete" id="deleteeconomy" data-type="economy" disabled /> <i> Keep it disable</i>
</div>


1） 银行账户
2） 帐户名
使其启用onload，因为它有两个值


1） 保险帐户
2） 保险名称
使其启用onload，因为它有两个值


1） 经济账户
保持禁用状态

请参见此处的工作小提琴：“
您可以使用以下代码：

$('.panel').each(function () {
 var lengthOfClones = $(this).find('.clonablePart').length;
 var flagDisable = lengthOfClones == 1
 $(this).find("input[type='button']").prop('disabled',flagDisable);
});

它会解决你的问题

这看起来是可行的。它是否可能会失败，因为您可能实际上必须使用
removeAttr（'disabled'）
和
attr（'disabled'，'true'）
，而不是仅仅使用
attr（'disabled'，：Bool）
（jQuery是否有一个
prop
函数？我想可能就是这样。请张贴一些HTML的例子，让我们检查，虽然，否则这将是很难帮助。你们可以看看我的链接已附加为方便查看的问题。这是菲德尔的链接，我已经调查过了，并发布了答案。不过，提醒一下：SO有自己的SO代码段，这些代码段是SO固有的，它符合所有代码都包含在网站中的建议，这样当用户想稍后查看答案和问题时，链接就不会中断。不，不是这样的。更新的问题。有多个输入类型=按钮。只有ID我才能区分它。有多个输入类型=按钮。只有ID我才能区分它。在您的任何包装器（
.panel
）中只有一个
输入[type=button]
，这就是我们使用
find（）
函数来查找正确的。如果您打算拥有更多，则类是比使用ID更好的方法。如果您能帮助我，那就太好了。您可以轻松地使用
input[value='delete']
找到相应的删除按钮。我会更新答案，但请注意，在提问后改变你的问题是一个很大的禁忌，因为他们会让所有答案变得无关紧要，这会让我们追逐一个不断变化的目标。没问题。看看我更新的答案是否适用于您，并让我知道。如果有多个输入类型=按钮，该怎么办。只有ID我才能区分它。你可以使用数据属性来区分它。我已经在小提琴中使用了它，但什么样的更改将帮助我获得最终结果。为什么还要使用
数据类型
？它使HTML变得杂乱无章。您可以通过
值
轻松找到它，因为它总是
删除
代码中有多个输入类型按钮。所以在数据类型的帮助下，我得到了值，比如BANK，并使用#deleteBank禁用按钮。在#deleteBank中，从数据类型中重试。