jquery - jQuery 从同一个元素获取不同的值并将它们用作不同的类

Question

我正在努力寻找一种方法来获取子元素的文本并将它们用作父元素的单独类。我有点明白逻辑，但找不到分开每个班级的方法。

为了增加更多的复杂性，我想删除特殊字符，替换空格并将所有内容都小写。我想我已经得到了这部分（希望如此）。

无论如何......我有这个html代码：

<div class="parent">
   <div class="child">Child #1</div>
   <div class="child">Child #2</div>
   <div class="child">Child #3</div>
   <div class="child">Child #4</div>
</div>
<div class="parent">
   <div class="child">Child #A</div>
   <div class="child">Child #b</div>
   <div class="child">Child #9</div>
   <div class="child">Child #K</div>
</div>

我想看到的是以下内容：

<div class="parent new_child_1 new_child_2 new_child_3 new_child_4">
   <div>Child #1</div>
   <div>Child #2</div>
   <div>Child #3</div>
   <div>Child #4</div>
</div>
<div class="parent new_child_a new_child_b new_child_3 new_child_1">
   <div>Child #A</div>
   <div>Child #b</div>
   <div>Child #3</div>
   <div>Child #1</div>
</div>

所以到目前为止我得到了这个：

$(".parent").each(function(){
        var child_text = $(this).find(".child").text();
        var new_class = child_text.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '_').toLowerCase()
        $(this).addClass("new_" + new_class);
});

但是我得到了所有文本的一个字符串（即“new_child_1child_2child_3child_4”）。

感谢所有愿意提供帮助的人。

标签： jqueryarrays

Answer 1

您可以从孩子制作一个数组并使用Array.reduce，如下所示：

$(".parent").each(function() {
  var children = $(this).find('.child');
  var new_class = Array.from(children).reduce((carry, child) => {
    var text = child.innerText.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '_').toLowerCase();

    carry += `new_${text} `;

    return carry;
  }, '');
  console.log(new_class);
  $(this).addClass(new_class);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">Child #1</div>
  <div class="child">Child #2</div>
  <div class="child">Child #3</div>
  <div class="child">Child #4</div>
</div>
<div class="parent">
  <div class="child">Child #A</div>
  <div class="child">Child #b</div>
  <div class="child">Child #9</div>
  <div class="child">Child #K</div>
</div>