別のdivクラスを使用してdivに同じクラスを追加

Question

あなたの助けが必要です。私はJavaScriptには全く新しいですが、いくつかの機能を使ってウェブサイトを作ることができました。今私の質問は：

私は77 divsと77のパスがあります。すべてのパスがそのパスに属するdivと同じクラスになるようにします。すべてのdivとすべてのパスには独自のIDがあります。私のインデックスマークアップは次のようになります。ページがロードされたとき

<div id="div_1" class="div_class_1"></div> 
<div id="div_2" class="div_class_2"></div> 
<div id="div_3" class="div_class_3"></div> 
<div id="div_4" class="div_class_4"></div> 
    .... 
<div id="div-77"></div> 

<div id="map"> 
    <path id="path_1" class="get class from #div_1"></path> 
    <path id="path_2" class="get class from #div_2"></path> 
    <path id="path_3" class="get class from #div_3"></path> 
    <path id="path_4" class="get class from #div_4"></path> 
    ... 
    <path id="path_77" class="get class from #div_77"></path> 
</div> 

だから基本的に私は、関数は＃1 path_1のためのクラスとして追加する＃1 div_1のクラスを読みたいです。

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Element/className

この例を見てください。

あなたがこの方法

elm = document.getElementById('item'); 
var cName = elm.className; 

を使用して要素のクラスを取得することができますし、その場でこのようにクラス名を変更することができます。

elm.className = 'inactive'; // class name inactive will be applied to the selected element 

forループを作成すると、オンザフライでクラスを取得、適用、または削除できます。

Answer 2

あなたはdiv要素を反復し、divのIDに基づいて、パスのクラス要素を更新するために.eachメソッドを使用することができ、ここでの実施例である：

$(document).ready(function() { 
 

 
    $('#divs').children('div').each(function() { 
 
    
 
     var index = $(this).attr('id').split('_')[1]; 
 
     console.log(index); 
 
     
 
     $('#path_' + index).addClass($(this).attr("class")); 
 
    
 
    }); 
 
    
 
    console.log($('#map').html()); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="divs"> 
 
    <div id="div_1" class="div_class_1"></div> 
 
    <div id="div_2" class="div_class_2"></div> 
 
    <div id="div_3" class="div_class_3"></div> 
 
    <div id="div_4" class="div_class_4"></div> 
 
    <div id="div_77" class="div_class_77"></div> 
 
</div> 
 

 
<div id="map"> 
 
    <path id="path_1" class=""></path> 
 
    <path id="path_2" class=""></path> 
 
    <path id="path_3" class=""></path> 
 
    <path id="path_4" class=""></path> 
 
    <path id="path_77" class=""></path> 
 
</div>