jquery - 将具有特定类的按钮移动到无序列表的末尾

Question

我有一个无序列表，其中有一个呈现不同颜色的按钮。该按钮可以是普通按钮，也可以具有“已停产”类。我的要求是，我想将类为“discontinued”的按钮移动到无序列表的末尾。请在下面找到呈现列表的标记。

<ul>
<li>
    <span class="koh-product-variant" data-koh-color="Ice Grey">
    <button class="koh-product-color discontinued" disabled="disabled" data-hasqtip="swatch00">
    <img src="https://kohler.scene7.com/is/image/PAWEB/swatch_95?$SwatchSS$" width="40" height="40" alt=""><span class="label">Ice Grey</span>
    </button>
    </span>
</li>
<li>
    <span class="koh-product-variant" data-koh-color="Almond">
    <button class="koh-product-color discontinued" disabled="disabled" data-hasqtip="swatch01">
    <img src="https://kohler.scene7.com/is/image/PAWEB/swatch_47?$SwatchSS$" width="40" height="40" alt=""><span class="label">Almond</span>
</button>
</span>
</li>
<li>
    <span class="koh-product-variant koh-selected-variant" data-koh-color="White">
    <button class="koh-product-color" data-hasqtip="swatch02">
    <img src="https://kohler.scene7.com/is/image/PAWEB/swatch_0?$SwatchSS$" width="40" height="40" alt=""><span class="label">White</span>
</button>
</span>
</li>
<li>
    <span class="koh-product-variant" data-koh-color="Biscuit">
    <button class="koh-product-color" data-hasqtip="swatch03">
    <img src="https://kohler.scene7.com/is/image/PAWEB/swatch_96?$SwatchSS$" width="40" height="40" alt=""><span class="label">Biscuit</span>
</button>
</span>
</li>

我想移动整个 li，带有停止类的按钮到 ul 的末尾。感谢您的帮助。

Answer 1

如果你想要那个<li class="discontinued">在 <ul> 的末尾然后像下面这样改变它的顺序:

    <ul>
        <li>
            <span class="koh-product-variant koh-selected-variant" data-koh-color="White">
            <button class="koh-product-color" data-hasqtip="swatch02">
            <img src="https://kohler.scene7.com/is/image/PAWEB/swatch_0?$SwatchSS$" width="40" height="40" alt=""><span class="label">White</span>
        </button>
        </span>
        </li>
        <li>
            <span class="koh-product-variant" data-koh-color="Biscuit">
            <button class="koh-product-color" data-hasqtip="swatch03">
            <img src="https://kohler.scene7.com/is/image/PAWEB/swatch_96?$SwatchSS$" width="40" height="40" alt=""><span class="label">Biscuit</span>
        </button>
        </span>
        </li>
        <li>
            <span class="koh-product-variant" data-koh-color="Ice Grey">
            <button class="koh-product-color discontinued" disabled="disabled" data-hasqtip="swatch00">
            <img src="https://kohler.scene7.com/is/image/PAWEB/swatch_95?$SwatchSS$" width="40" height="40" alt=""><span class="label">Ice Grey</span>
            </button>
            </span>
        </li>
        <li>
            <span class="koh-product-variant" data-koh-color="Almond">
            <button class="koh-product-color discontinued" disabled="disabled" data-hasqtip="swatch01">
            <img src="https://kohler.scene7.com/is/image/PAWEB/swatch_47?$SwatchSS$" width="40" height="40" alt=""><span class="label">Almond</span>
        </button>
        </span>
        </li>
   </ul>

否则你需要像下面这样提供 css :

.discontinued {
   position: "absolute";
   bottom: 0;
}