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

Posted 2023-05-09

【中文标题】jQuery 从同一个元素获取不同的值并将它们用作不同的类

【英文标题】：jQuery get different values from same element and use them as different classes

【发布时间】：2021-11-25 02:43:34

【问题描述】：

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

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

无论如何...我有这个 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”）。

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

【参考方案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>

【讨论】：

谢谢！而已！感谢所有帮助过我的人:)

【参考方案2】：

您只在父级上进行迭代，您需要直接在子级上进行迭代。 我还没有尝试过，但我相信它应该很接近。

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

编辑：如果你只需要添加一个空格，你可以在函数中这样做：

$(".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()
        // check if newclass has data, if it does, add a leading space
        if (new_class.length > 0)  $(this).addClass(" new_" + new_class); );
);

【讨论】：

感谢您的回复。不幸的是，它不起作用，因为它添加了一个包含元素所有文本的类，而不是为每个子元素的文本添加一个类

您希望父级应用所有“new_child”的类而不是子级？

是的，我想看看父元素有不同的类，命名为它包含的每个子元素的文本。所有这些都带有“new_”前缀。我唯一不能开始工作的是将所有文本划分为不同的类。我只设法创建了一个巨大的类，其名称是子元素所有文本的连接。

我添加了一个可能有效的编辑，以正确分隔名称。

再次感谢您的回复和帮助。不幸的是，它仍然只创建一个类“new_child_1child_2child_3child_4”而不是4个不同的类“new_child_1 new_child_2 new_child_3 new_child_4”。

【参考方案3】：

如果你想要的字符总是在#之后，你可以使用分割函数，像这样

已编辑

$(".parent").each(function() 
  var childs = [];
  $(this).find(".child").each(function(key) 
    childs[key]='new_child_'+$(this).text().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '_').toLowerCase();
    $(this).removeClass('child');
  );

  console.log(childs.join(' '));
  $(this).addClass(childs.join(' '));
);

<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">aBc*d#</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>

【讨论】：

感谢您的回复。不，文本将是随机的，并不总是包含 #。

代码已编辑，类似这样？

是的，这也有效！谢谢！