javascript - 按数据属性和 id 匹配元素

Question

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

因此，在下面的示例中，“a”的数据属性为 data-dropdown="drop-delivery-options"。第二个元素具有 ID="drop-delivery-options"，因此它们匹配。我可以选择具有此 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>

Answer 1

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

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

Working example