javascript - 按属性分组 div

Question

基于此，我尝试按其 div 属性“messsage-id”对 div 进行分组。所以所有具有相同“message-id”的 div 都应该被一个类名 group 的 div 包裹。

<div class="message" message-id="1">a</div>
<div class="message" message-id="1">a</div>
<div class="message" message-id="2">a</div>
<div class="message" message-id="2">a</div>
<div class="message" message-id="3">a</div>

但我不让它与属性而不是类名一起工作。这是我尝试过的：

var groups = {};
$('.day').each(function () {
    var className = this.getAttribute("message-id").match(/(day\d+)/)[1],
        $group = groups[className];
    if (!$group) {
        $group = $('<div />', {
            'class': 'group'
        }).insertAfter(this);
        groups[className] = $group;
    }
    $group.append(this);
})

这是小提琴

标签： javascriptjquery

Answer 1

您使用该函数走在正确的道路上，getAttribute但不需要match在代码中使用该函数，因为getAttribute已经为您的组返回了 id。此外，您$('.day')的循环没有针对正确的类，它应该$('.message')在您的示例中定位。

var groups = {};
$('.message').each(function () { 
    var className = this.getAttribute("message-id"),
    $group = groups[className];
    if (!$group) {
        $group = $('<div />', {
            'class': 'group'
        }).insertAfter(this);
        groups[className] = $group;
    }
    $group.append(this);
})

.group {
    border: 1px solid red;
    margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message day" message-id="1">a</div>
<div class="message day" message-id="1">a</div>
<div class="message day" message-id="2">a</div>
<div class="message day" message-id="2">a</div>
<div class="message day" message-id="3">a</div>