jQuery将元素移动到父元素内

Question

我有一个订单清单，希望将订单日期放在订单ID的后面。因此，我试图将元素.order_date.column-order_date移到a.wcpv-vendor-order-by-id之后。在这个问题上，我正在使用jQuery .append

jQuery(document).ready(function($){
$( "a.wcpv-vendor-order-by-id" ).append( $( ".order_date.column-order_date" ) );
});

但是，当我添加它时，会将所有订单日期移动到orderID之后。因此，我得到的是订单ID，然后是15个不同的日期。我该如何追加，以便它仅将订单日期移动到其父代内部？

我正在处理的订单列表如下：

<tbody id="the-list" data-wp-lists="list:order">
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
    <tr class="order-hold"></tr>
</tbody>

在每个订单中的外观如下：

<tr class="order-hold">
    <th scope="row" class="check-column">
        <input type="checkbox" name="ids[43]" value="61">
    </th>
    <td class="order_id column-order_id has-row-actions column-primary orange-me" data-colname="Booking"><a href="https://example.com/wp-admin/admin.php?page=wcpv-vendor-order&amp;id=1749" class="wcpv-vendor-order-by-id">1749</a>
        <button type="button" class="toggle-row"><span class="screen-reader-text">Vis for flere detaljer</span></button>
    </td>
    <td class="order_status column-order_status" data-colname="Booking status"><span class="wcpv-order-status-pending">Pending</span></td>
    <td class="order_date column-order_date" data-colname="Booking dato">July 4, 2019 10:47 am</td>
    <td class="shipping_address column-shipping_address" data-colname="Shipping"></td>
    <td class="product_name column-product_name" data-colname="Talent:"><a class="post-edit-link" href="https://example.com/wp-admin/post.php?post=1057&amp;action=edit">1x Faustix</a></td>
    <td class="total_commission_amount column-total_commission_amount" data-colname="Commission"><span class="woocommerce-Price-amount amount">350&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></span>
    </td>
    <td class="commission_status column-commission_status" data-colname="Kommission Status"><span class="wcpv-unpaid-status">UBETALT</span></td>
    <td class="paid_date column-paid_date" data-colname="Paid Date">0000-00-00 00:00:00</td>
    <td class="fulfillment_status column-fulfillment_status" data-colname="Udførselsstatus"><span class="wcpv-fulfilled-status">Opfyldt</span></td>
</tr>

我希望订单日期在订单ID之后，但仅在其上级内部移动。

Answer 1

您可以反复获取每个个案，然后将order_date元素的选择限制为tr元素的后代：

$("a.wcpv-vendor-order-by-id").each(function () {
    $(this).append( $(".order_date.column-order_date", $(this).closest("tr")) );
});