Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add classes dynamically to the children by looping through div

Tags:

jquery

css

I need a jquery script to add class dynamically to the 'div's' in the class row. The class is for setting margins. If there is two div's in class row add class to first one only, and If there is three 'div's' add class to two avoid third.

So the actual need is calculate the div's on the 'row' and add classes to div other than the last one. Here is my html:-

    <div class="row">
                    <div class="two-col">
                        <h3>Header 2/3 Column</h3>
                        <p>Kidney Cancer Canada is a charitable patient-led support organization established to improve the quality of life for patients and their 
                        families living with kidney cancer. <a href="#">Kidney Cancer Canada</a> advocates for access to netreatments, provides support and information to patients, 
                        funds much-needed research, and works to increase awareness of kidney cancer as a significant health issue. Our goal is to help patients navigate
                        through information about their disease and ensure they have access to new treatment options available to them.</p>
                    </div>
                    <div class="one-col">
                        <h3>Header 1/3 Column</h3>
                        <p>KCC hosts patient and caregiver education meetings and webcasts from locations all across canada. Atttending meetings in-person provides an 
                        excellent oppurtunity to meet other kidney cancer patients, caregivers, and healthcare professionals</p>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="row">
                    <div class="one-col">
                        <h3>Header 1/3 Column</h3>
                        <p>KCC hosts patient and caregiver education meetings and webcasts from locations all across canada. Atttending meetings in-person provides an 
                        excellent oppurtunity to meet other kidney cancer patients, caregivers, and healthcare professionals</p>
                    </div>
                    <div class="one-col">
                        <h3>Header 1/3 Column</h3>
                        <p>KCC hosts patient and caregiver education meetings and webcasts from locations all across canada. Atttending meetings in-person provides an 
                        excellent oppurtunity to meet other kidney cancer patients, caregivers, and healthcare professionals</p>
                    </div>
                    <div class="one-col">
                        <h3>Header 1/3 Column</h3>
                        <p>KCC hosts patient and caregiver education meetings and webcasts from locations all across canada. Atttending meetings in-person provides an 
                        excellent oppurtunity to meet other kidney cancer patients, caregivers, and healthcare professionals</p>
                    </div>
                    <div class="clear"></div>
                </div>
like image 277
Jones Rajan Avatar asked Nov 01 '12 10:11

Jones Rajan


1 Answers

If you don't want to apply that class to your divs with class clear then you can use this

$('div.row').find('div').addClass('yourclass').not(':last-child,.clear');

Or

$('div.row').find('div').addClass('yourclass').not(':last-child');

Live Sample

like image 192
Priyank Patel Avatar answered Oct 24 '22 05:10

Priyank Patel