6

クラス行の「div」にクラスを動的に追加するには、jquery スクリプトが必要です。余白を設定するためのクラスです。クラス行に 2 つの div がある場合は、最初の 1 つだけにクラスを追加します。3 つの 'div' がある場合は、2 つにクラスを追加し、3 番目を避けます。

したがって、実際の必要性は、「行」の div を計算し、最後のクラス以外のクラスを div に追加することです。これが私の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>
4

3 に答える 3

4

divsそのクラスをwith クラスに適用したくない場合は、clearこれを使用できます 

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

または

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

ライブサンプル

于 2012-11-01T10:42:52.463 に答える
2

このタスクを実行するスクリプトは次のとおりです。

    $.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');
          }
    });
于 2012-11-01T10:40:12.377 に答える
1 
$("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++;

 });

});
于 2012-11-01T10:47:48.190 に答える