Dodaj klasy dynamicznie do dzieci przez zapętlenie przez div

Question

Potrzebuję skrypt jquery, aby dynamicznie dodać klasę do "div's" w wierszu klasy. Klasa służy do ustawiania marginesów. Jeśli istnieją dwa div w klasie, dodaj klasę tylko do pierwszej, a jeśli istnieją trzy klasy "div" dodaj dwie trzecie.

Zatem rzeczywistą potrzebą jest obliczyć div's w "wierszu" i dodać klasy do div inne niż ostatnie. Tu jest mój 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> 

Answer 1

Jeśli nie chcesz zastosować tę klasę do swojego divs z klasą clear następnie można użyć tego

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

Albo

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

Live Sample

Answer 2

Oto skrypt do wykonania tego zadania:

$.each($(".row"),function() { 

     var length = $(this).find('.two-col').length+$(this).find('.one-col').length+$(this).find('.three-col').length; 
      for(i=1;i<length;i++) 
      { 
      $(this).find(":nth-child("+i+")").addClass('margin-right'); 
      } 
    }); 

Answer 3

$("div.row").each(function(){ 

len = $(this).find("div").length ; 
if ($(this).find("div.clear").length > 0){ 
    len = len-1; 
} 
var i=0; 
$(this).find("div").each(function(){ 
if($(this).attr("class") != "clear"){ 
if (i < len-1){ 
    $(this).addClass("margin_class"); 
    } 
} 
i++; 

}); 

});