Clever Geek Handbook

How to calculate length of child div from parent div; use of class names; in jQuery?

The parent div has the class name 'panel'.

It contains additional child divs that have a class name of 'clonablePart' as well as one button.

We need to check

1) if there are multiple clonablePart then the button which is disabled by default should enable enable

2) if there is one clone part then the button should remain disabled.

Note: The class name is "panel" in the parent panel div; can also exist in its child div. Also "Input" can be several

See the fiddle for details on the HTML structure. https://jsfiddle.net/k2rbs70m/

Below is the 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);
    });

If something is unclear, write.

Below is the HTML for the idea:

<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>
+3


source to share


4 answers


If you only have one input

child per class panel

, you can target the following:

$(this).find('input')

In your code, this will give:

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


https://jsfiddle.net/ggngygzy/

EDIT

IF you have multiple children for each panel, you can find a unique property and customize it. For example, for example:

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


source


This will solve your problem that you presented in the script:

$('.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) ;
});

The trick is that you want children to count, so use .find()

. Then find the button inside your wrapper and enable and disable it based on the number of results found.



//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>
Run codeHide result


+1


source


Your code has problems $(this).data("type")

always returns Clones

, which is wrong.

So, provide a custom attribute data-type

for each one div

in the section .panel

, say for Bank , give data-type="Bank"

and so on.

So the HTML becomes:

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

See a working fiddle here: " http://jsfiddle.net/k2rbs70m/7/ "

+1


source


You can use the following code:

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

He will fix your problem.

https://jsfiddle.net/k2rbs70m/9/

+1


source






More articles:


All Articles