jquery - 使用给定 id 的详细信息填充元素

Question

我有一个复选框选项列表

<div id="myList">
    <input id="item_51" type="checkbox" value="51" name="item[]">
    <label for="item_51">item 51 value</label>
    <br>
    <input id="item_55" type="checkbox" value="55" name="item[]">
    <label for="item_55">some other value</label>
    <br>
    <input id="item_58" type="checkbox" value="58" name="item[]">
    <label for="item_58">another value</label>
    <br>
    ...
</div>

现在，当我加载网站内容时，我有其他元素包含具有匹配值的数据属性。

<div id="em1" class="myEm" data-items="55">...</div>
<div id="em4" class="myEm"  data-items="51,58">...</div>
<div id="em31" class="myEm" data-items="55,58">...</div>

当数字在 data-items 中时，我需要获取复选框标签的值来填充元素 div匹配复选框值。

如果它只是一个匹配的项目，我不会有问题，但我对多个项目有点困惑。所以我假设我首先循环遍历具有数据项值的项目

$('.myEm').each(function() {

    var matchEm = $(this).attr('data-items'),
        matchCh = $('#myList input:checkbox').val(matchEm);

    $(this).text(matchCh);

});    

<div id="em31" class="myEm" data-items="55,58">...</div> 的预期结果将是:

<div id="em31" class="myEm" data-items="55,58">some other value, another value</div>

Answer 1

尝试使用 .split() 、 .map() 、 $.inArray() 、 .get()

$('.myEm').each(function() {

    var matchEm = $(this).attr('data-items').split(","),
        matchCh = $('#myList input:checkbox').map(function(i, el) {
                    return $.inArray(el.value, matchEm) !== -1 
                           ? el.nextElementSibling.innerHTML : null
                  }).get();

    $(this).text(matchCh.join(", "));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myList">
    <input id="item_51" type="checkbox" value="51" name="item[]">
    <label for="item_51">item 51 value</label>
    <br>
    <input id="item_55" type="checkbox" value="55" name="item[]">
    <label for="item_55">some other value</label>
    <br>
    <input id="item_58" type="checkbox" value="58" name="item[]">
    <label for="item_58">another value</label>
    <br>
    ...
</div>

<div id="em1" class="myEm" data-items="55">...</div>
<div id="em4" class="myEm"  data-items="51,58">...</div>
<div id="em31" class="myEm" data-items="55,58">...</div>