根据内容添加类

Question

我有一些像这样的html模拟：

我想根据其子级div为我的cta-module div添加一个额外的title，content，button类。

非常感谢这个初始部分的一些帮助。

＆＃13;

＆＃13;

<!-- Add Class Title, Content, Button to cta-module-->
<div class="cta-module">
  <div class="title"></div>
  <div class="content"></div>
  <div class="button"></div>
</div>

<!-- Add Class Title & Button to cta-module-->
<div class="cta-module">
  <div class="title"></div>
  <div class="button"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$(".cta-module").children().each(function() {
  $(this).closest(".cta-module").addClass($(this).attr('class'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add Class Title, Content, Button to cta-module-->
<div class="cta-module">1
  <div class="title"></div>
  <div class="content"></div>
  <div class="button"></div>
</div>

<!-- Add Class Title & Button to cta-module-->
<div class="cta-module">2
  <div class="title"></div>
  <div class="button"></div>
</div>

1. 使用.cta-module遍历.each()的所有孩子，然后使用this上下文获取当前项目，并使用.attr('class')让其上课。
2. 使用.cta-module
将课程添加到家长.addClass()

Answer 2

您可以遍历cta-module的孩子并获取每个孩子的课程并将其应用到最近的cta-module

我硬编码.children(".title, .content, .button")的原因是，如果它有一个类的其他元素，那么否则也会添加到父类。这样我们只能获得title, content and button。如果你想要所有，只需使用.children()

＆＃13;

＆＃13;

$('.cta-module').children(".title, .content, .button").each(function() {
  var getclass = $(this).attr("class");
  $(this).parent().addClass(getclass)
})

console.log($('.cta-module:eq(0)').attr("class") + " | " + $('.cta-module:eq(1)').attr("class"))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add Class Title, Content, Button to cta-module-->
<div class="cta-module">
  <div class="title"></div>
  <div class="content"></div>
  <div class="button"></div>
</div>

<!-- Add Class Title & Button to cta-module-->
<div class="cta-module">
  <div class="title"></div>
  <div class="button"></div>
</div>

＆＃13;

＆＃13;

＆＃13;