使用另一个 div 类将相同的类添加到 div答案

【问题标题】：adding same class to div using another divs class使用另一个 div 类将相同的类添加到 div
【发布时间】：2018-04-28 19:07:15
【问题描述】：

我需要你的帮助。我对 javascript 完全陌生，但我能够使用一些功能制作一个网站。现在我的问题是：

总而言之，我有 77 个 div 和 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>

所以基本上当页面加载时，我希望函数读取#div_1 的类以将其添加为#path_1 的类。

【问题讨论】：

如果你指定class的div下的path元素没有设置明确的class或style属性，那么它们不会自动使用与其父div相同的class或style吗？无论哪种方式，您是否想要一个接受 div 标识符、确定其类并使用此类更新指定 div 的路径后代的函数？
我需要一个函数，说明 id="path-x" 的路径必须与 id="div-x" 的 div 具有相同的类。
您是否希望在页面加载后自动运行它？您可以考虑逐步分解您想要的逻辑，以便其他人清楚。例如- (1) 获取文档中的所有 div，(2) 为每个 div，获取所有路径元素，(3) 为每个路径元素，将类名设置为父 div 的类名
我更新了我之前的帖子。希望这能让它更容易理解。
您可能会重新评估您的应用程序结构。根据定义，类是类似事物的集合。问问自己为什么需要单独处理每个元素而不是使用抽象函数。

标签： javascript jquery

【解决方案1】：

您可以使用.each 方法迭代 div 元素并根据 div id 更新路径类元素，这是一个工作示例：

$( 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>

【讨论】：

【解决方案2】：

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 循环，然后您可以即时获取、应用或删除类。

【讨论】：

但是使用这种方法我需要手动添加类。我想让js读取div的class并自动添加到pass中。