如何在jQuery中单独选择子元素并将对应ul移入同级div？

我尝试把ul元素追加到div中，但所有ul都被添加到了所有div里。我需要每个.first下的ul仅移入它的同级div中，循环操作时总是把所有ul批量加到所有div里，而且HTML里没有额外的类或ID可以精准选择，我的HTML有6000多行，以下是简化示例：

<li class="first">
    <a>100</a>
    <div></div>
    <ul>
        <li>
            <a>1</a>
        </li>
        <li>
            <a>2</a>
        </li>
        <li>
            <a>3</a>
        </li>
        <li>
            <a>4</a>
        </li>
        <li>
            <a>5</a>
        </li>
        <li>
            <a>6</a>
        </li>
    </ul>
</li>

<li class="first">
    <a>200</a>
    <div></div>
    <ul>
        <li>
            <a>7</a>
        </li>
        <li>
            <a>8</a>
        </li>
        <li>
            <a>9</a>
        </li>
        <li>
            <a>10</a>
        </li>
        <li>
            <a>11</a>
        </li>
        <li>
            <a>12</a>
        </li>
    </ul>
</li>

期望效果 #

每个.first下的ul被移入该li内的div中，最终结构如下：

<li class="first">
    <a>100</a>
    <div>
        <ul>
            <li>
                <a>1</a>
            </li>
            <li>
                <a>2</a>
            </li>
            <li>
                <a>3</a>
            </li>
            <li>
                <a>4</a>
            </li>
            <li>
                <a>5</a>
            </li>
            <li>
                <a>6</a>
            </li>
        </ul>
    </div>
</li>

<li class="first">
    <a>200</a>
    <div>
        <ul>
            <li>
                <a>7</a>
            </li>
            <li>
                <a>8</a>
            </li>
            <li>
                <a>9</a>
            </li>
            <li>
                <a>10</a>
            </li>
            <li>
                 <a>11</a>
            </li>
            <li>
                <a>12</a>
            </li>
        </ul>
    </div>
</li>

解决方案 #

你猜测用each和上下文选择的思路是对的，核心是确保每个操作都限定在当前.first元素的范围内，避免全局选择导致的批量错误。

方法1：使用each遍历 #

$(".first").each(function() {
    // 仅在当前.first元素内查找ul和div
    const $targetUl = $(this).find("ul");
    const $targetDiv = $(this).find("div");
    // 将ul移入对应的div
    $targetUl.appendTo($targetDiv);
});

方法2：简洁链式写法 #

利用appendTo的回调函数，每个ul会自动找到自己的同级div作为目标容器，无需显式遍历：

$(".first ul").appendTo(function() {
    // 返回当前ul的同级div元素
    return $(this).siblings("div");
});

这两种方法都能确保每个ul只被移入自己所在.first元素内的div中，不会出现所有ul被批量添加到所有div的问题。

内容的提问来源于stack exchange，提问作者Tolga