Jquery 如何从一个字符串中的所有项中获取数据值

我有一个可变数量的项目，这些项目被分组在不同的列表中。用户可以通过拖放更改项目。每次更改后，我需要显示一个包含所有项的字符串，以及它们的分组方式。该字符串包含项目的数据值，而不是文本

获取items数据值没有问题，但我不知道如何继续构建字符串

<input type="text" id="listOfItems">

<ul class="group">
    <li class="item" data-value="A">Item A</li>
    <li class="item" data-value="B">Item B</li>
    <li class="item" data-value="C">Item C</li>
</ul>
<ul class="group">
    <li class="item" data-value="D">Item D</li>
    <li class="item" data-value="E">Item E</li>
    <li class="item" data-value="F">Item F</li>
</ul>
<ul class="group">
    <li class="item" data-value="G">Item G</li>
    <li class="item" data-value="H">Item H</li>
    <li class="item" data-value="I">Item I</li>
</ul>

<script>
    $(".group").each(
        function (index) {
            $("li", this).data("value")
            //Next steps?
        }
    );
</script>

项目A
B项
C项


项目D
项目E
F项


G项
项目H
第I项

$（“.group”）。每个(
功能（索引）{
$（“li”，此）。数据（“值”）
//下一步？
}
);

---

所需的结果是输入字段中的字符串“（A，B，C），（D，E，F），（G，H，I）”。

使用

.map

两次，在每个

.group

上各一次（在其值周围放一个括号），并在每个

.item

上嵌套一次，以从每个

中获取值：


const str=$（'.group'）
.map（函数（）{
返回(
'(' +
$（this）.find（'.item'）.map（function（）{
返回$（this.data（'value'）；
})
.get（）
.join（“，”）+
')'
)
})
.get（）
。加入（‘，’）；
$（'listOfItems'）.val（str）


项目A
B项
C项


项目D
项目E
F项


G项
项目H
第I项
这将忽略任何空ULs

jQuery


让arr=[]；
$（“[数据值]：第一个子项”）。每个（（，ele）=>{
让text=[]；
$（ele）.parent（）.children（）.each（（ele，ele）=>text.push（$（ele）.attr（“数据值”））
arr.push（“（“+text.join（“，”+”）”）
})
$（“#列表项”）.val（arr.join（“，”）


项目A
B项
C项




G项
项目H
第I项
遍历每个组，并在其中遍历所有
li
元素。在每次迭代中获取一个项目数组，并通过
数组生成一个逗号分隔的字符串。join


var allValues=$（“.group”）.get（）.map（函数（aGroup）{
var values=$（aGroup）.children（'li'）.get（）.map（函数（项）{
返回$（项目）.data（'value'）；
})
返回`（${values.join（'，'）}）`；
})
$（'#listOfItems'）.val（allValues.join（'，'）


项目A
B项
C项


项目D
项目E
F项


G项
项目H
第I项
请注意，如果组为空，这将添加一个，（）