子どものクラスに応じてCSSクラスのコンテナを追加します

Question

ページに複数のdivがあります。子供のクラスが何であるかに応じて、さまざまなクラスを「コンテナ」に追加する必要があります。 たとえば、「テスト・ファースト」のスパンがある場合、「コンテナ」のクラスは「コンテナ・ファースト」でなければなりません。

マークアップは以下のようになります。

<div class="container"> 
    <span class="test first">Some text</span> 
</div> 
<div class="container"> 
    <span class="test second">Some text</span> 
</div> 

私の非稼働のコードは次のとおりです。

if ($('.container') != null) { 
    var sCont = $('.container'); 
     for (var i = 0; i < sCont.length; i++) { 
      if(serviceCont.has('.first').length) { 
       sCont.addClass('first') 
     } 
    } 
} 

Answer 1

これは

$(function(){ 


    $('.container').each(function(){ 

    if($(this).children('.test.first').length > 0){ 
     $(this).addClass('first'); 
    } 

    if($(this).children('.test.second').length > 0){ 
     $(this).addClass('second'); 
    } 

    }); 

})(); 

Answer 2

if ($('.container').length >0) { 
    $('.container').each(function(){ 
     if($(this).find('.first').length != 0) { 
       $(this).addClass('first') 
      } 
     }); 
    } 

$('.container')は一致するすべての要素を持つ配列を返しますし、それは次のように使用する必要がありますアレイ

Answer 3

$('.container').children.each(function() { 
    var parent = $('.container'); 
    if($(this).hasClass('EnterClassNameHere') { 
     parent.addClass('EnterClassNameHere'); 
    } 
}); 

Answer 4

play with it on CodenpenはjQueryのを使用して、あなたが必要とするコードが、それはかなり簡単です、次のとおりです。

$('.test.first').parent('.container').addClass('first'); 

これはtestとfirst（そうclass="test first"または `クラスのクラスを持っている任意の要素を見ていきます= "最初のテスト"は関係ありません）。

これは、クラスがcontainerであるすべての親を取得し、次にそれらにクラスfirstを与えます。

親なしにしたい場合は、パラメータなしで.parent()を使用してください。別のクラスを追加する場合は、変更してください。クラスを完全にオーバーライドする場合は、.addClass()の代わりに.attr('class', 'first')を使用してください。

Answer 5

構造はそう常に、あなたの例で示したものと同じである場合：

$('.container').each(function() { 
 
    var span_class = $(this).find('span').attr('class').split(' ')[1];  
 
    $(this).addClass(span_class); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <span class="test first">Some text</span> 
 
</div> 
 
<div class="container"> 
 
    <span class="test second">Some text</span> 
 
</div>

出力：

<div class="container first"> 
    <span class="test first">Some text</span> 
</div> 
<div class="container second"> 
    <span class="test second">Some text</span> 
</div> 

Answer 6

$('.container').each(function() { 
    var $cont = $(this); 
    $cont.children('span.first').each(function() { 
    $cont.addClass('first'); 
    }); 
}); 

Answer 7

ここでは、ソリューションです私は思いついた：

$('.container').each(
function(){ 
var addClass = $(this).children().first().attr('class'); 
addClass =addClass.split(' '); 
$(this).addClass(addClass[1]); 
}); 

• コンテナクラスで、すべてのdivタグを選択します。
• 各要素をループします。
• 最初の子のクラスを変数に格納します。
• これは文字列になり、分割して配列を取得できます。
• 親のdivタグ に追加したいそれぞれの子の2番目のクラスだと思っていましたが、ここでロジックを調整することはできません。

質問がありましたら教えてください。:)

Answer 8

最初に、順序付きクラス名の名前規則としてインデックス付きパターンを使用します。 の代わりに：第一、第二、第三... 使用：順序-1、オーダー-2、オーダー-3 ... 次に、既存のすべての子供たちをチェックして、その親を更新：考える

：

<div class="container"> 
    <span class="test order-1">Some text</span> 
</div> 
<div class="container"> 
    <span class="test order-2">Some text</span> 
</div> 

この関数は、その子クラスで、それぞれの親のクラスを更新します：

function copyStyleClassIntoParent(parentClass, childClass, patternPrefix) { 
    var i = 0, $child; 
    while (($child = $('.'+childClass+'.'+patternPrefix+(++i))).length) { 
     $child.closest('.'+parentClass).addClass(patternPrefix+i); 
    } 
} 

copyStyleClassIntoParent('container', 'test', 'order-'); 

注：あなたはそれを何回かやってつもりなら、あなたはまた、「removeClass」を持つ親廃止されたクラスを削除する必要があります。