按数据属性和 ID 匹配元素

match elements by data attribute and id

本文关键字：元素 ID 数据属性      更新时间：2023-09-26

我正在寻找一种使用jQuery比较元素的方法。基本上对于具有特定数据属性的每个元素，我想"appendChild"另一个具有匹配ID的元素。

因此，在下面的示例中，"a"的数据属性为 data-dropdown="drop-delivery-options"。第二个元素具有 ID="投递选项"，因此它们匹配。我可以选择具有此 ID 的元素，但如何选择与数据属性/ID 匹配的元素？

所以一个函数会像： 

If elementA[data-attribute] = elementB[ID] { 
    (elementA).appendChild(elementB) 
}

<a href="#" data-dropdown="drop-delivery-options" class="button">Add Option</a>
<div id="drop-delivery-options" data-dropdown-content class="f-dropdown content table-options drop-delivery-options">
    <ul>
        <li><a href="#">Add Deposit Account</a></li>
        <li><a href="#">Add Cash Pickup</a></li>
        <li><a href="#">Send to Card</a></li>
        <li><a href="#">Add Home Delivery</a></li>
    </ul>
</div>
您可以使用

data-dropdown 属性选择 select 元素，然后使用 appendTo() 将其追加到a 中。请注意，尽管给定您的示例，您最终会得到嵌套的a元素，这是无效的。您应该考虑将父a元素更改为其他内容。

$('.button').click(function() {
    $('#' + $(this).data('dropdown')).appendTo(this);
});

工作示例

相关文章：