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

问题描述

父div具有类名“panel”。

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

我们需要检查一下

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

2）如果有一个可克隆部分，则按钮应保持禁用状态

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

有关HTML结构的更多详细信息，请参阅小提琴。

以下是使用中的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>

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

$('.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() 。 然后，找到包装器中的按钮，并根据找到的结果数量启用和禁用该按钮。

 //Will take outer panels only $('.panel').each(function () { var button = $(this).find("input[value='delete']"); var clones = $(this).find('.clonablePart'); var type = button.data("type"); if(clones.length > 1) button.removeAttr('disabled') else button.attr('disabled', true) ; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <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> <br/> <div id="insurance_panel" class="panel"> <div id="insurance_panel1" class="clonablePart"> 1) Insurance Account </div> <div id="insurance_panel1" class="clonablePart"> 2) Insurance Name </div> <div class="panel"></div> <!--Remember outer panel can have inner panel--> <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"> <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> 

代码中存在问题$(this).data("type")总是返回Clones ，这是不正确的。

因此，为.panel下的每个div提供一个自定义属性data-type ，比如说Bank ，给data-type="Bank"等等。

所以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>

在这里看到工作小提琴：“ ”

您可以使用以下代码：

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

它会解决你的问题。