jQuery переместить элемент внутрь элементов parent

Question

Я получил список заказов, в которых я хотел бы разместить дату заказа сразу после идентификатора заказа. Поэтому я пытаюсь переместить элемент .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. Поэтому я получаю идентификатор заказа, а затем сразу 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>

Я ожидаю, что дата заказа сместится сразу после идентификатора заказа, но только внутри его родителя.

Answer 1

Вы можете выполнить итерацию, чтобы получить каждый отдельный случай, а затем ограничить выбор элемента order_date потомками tr элемента:

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