Reposition a specific class button to the bottom of the list without changing its order

I have a list that includes buttons rendering different colors. Some of the buttons have a "discontinued" class, and I need to move those buttons to the end of the list. Below is the HTML markup for the list:


        <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>
        </ul>

I need assistance with moving the li elements containing buttons with the "discontinued" class to the end of the ul. Any help would be greatly appreciated.

jqueryhtmlcss

Answer №1

To rearrange the <li class="discontinued"> that appears at the end of the <ul>, you can modify its order as shown below: 

    <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="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" 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>
   </ul>

If a different approach is needed, you can apply CSS similar to the following: 

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

Answer №2

One possible solution is to utilize the AppendTo method in jQuery.

$(document).ready(function(){
  $('li button.discontinued').closest('li').appendTo('ul');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<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>
</ul>

Answer №3

If you want to give the parent li element the discontinued class, consider utilizing the flexbox order property.

Feel free to check out this codepen example for reference: https://codepen.io/cmbonin/pen/QQLXmR

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a parent for CSS selectors in Material UI: A step-by-step guide

Currently, I am in the process of developing a Chrome Extension that incorporates Material UI. By using the inject method, the extension is able to apply all of the Material UI styles seamlessly. I have been contemplating the idea of adding a parent selec ...

cssgoogle-chrome-extensionmaterial-uijss

Erase information based on chosen checkbox identifiers in Laravel 5.3

I have a list of IDs that I am currently retrieving in an alert, and I want to send these IDs to the destroyAll method in my userController. Here is the JavaScript function through which I am getting the IDs: function deleteAll () { var checkedValues ...

jqueryajaxlaravel

Updating the functionality of Bootstrap 4 accordions

Utilizing HTML templates based on Bootstrap 4.3.1, I am delivering educational content to my students. In the current setup, all accordion panels are closed when the page loads, and each panel can be opened independently of others. To see a live example, ...

javascripthtmlcssbootstrap-4bootstrap-accordion

Is there a method to ensure the month remains unchanged?

In my Laravel project, I am facing a complex condition where I need to set a minimum date for an HTML input of type date. Condition: 1. Users can only select dates from the past ten days. 2. Only two days from the previous month are allowed. For example, i ...

phpjquerylaraveldateinput

Choose a different PHP value when the selection changes

I am looking to create a seamless connection between a select element and an input text field without the need to refresh the page. Here is an example of what I am trying to achieve: <select name="name_select" id="my_select"> <option value="1" ...

phpjqueryselectonchange

Toggle display of list items using jQuery on click event

I want to be able to toggle the visibility of my submenus when a link is clicked. Here's an example code snippet: <ul> <li><a href="www.example.com">Test</a></li> <li><a href="www.example.com ...

jqueryhtmlcss

What is the mechanism behind AJAX functioning without the need to refresh the page?

I came across a code (not written by me) for a button that allows users to bookmark a person and add them to a shortlist. Here's how the code looks: Here is the JS & Ajax portion: self.isMarked = ko.observable(@(Model.Application.IsMarked ? "tru ...

javascriptjqueryhtmlajaxknockout.js

Troubleshooting: Unable to Remove Files in PhoneGap

I've been working on a basic app that heavily utilizes PhoneGap to test its capabilities. Currently, I'm trying to delete a file that has been downloaded within the app, but I'm encountering some issues. The majority of the code I've im ...

javascripthtmlxcodecordova

"Phone calls at the click of a button with Twilio

I need to create a webpage where users can click a button to make a call to our office phone number directly from their browser. The code runs without any errors in the debugger, but when I try clicking the button on the page, nothing happens. There are ...

c#htmlvisual-studiotwilio

list of numerical values and converting them into whole numbers

Is there a way to achieve this more easily? I've been trying to extract values from an Associative Array and create another array with those values. I then want to use those numbers as the data value for my chart.js graph. Here is my desired result: ...

jqueryarraysint

What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails? This is what I am looking for: Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/ If not possible with just CSS, then a jQuery solution is acceptable. Is it o ...

javascriptjquerycssmobile-safari

Positioning of the dropdown in Material UI Autocomplete

Can the Material UI Autocomplete be customized easily to position the Popper dropdown relative to the text cursor, similar to the VS Code Intellisense dropdown? The input field is a multiline Textfield component. The code snippet below demonstrates: impor ...

javascriptcssreactjsmaterial-ui

Step-by-step guide on visually comparing two iframes for differences

Scenario : In my project, I am dealing with 2 iframes that contain a significant number of divs and other controls, making both iframes similar in size to complete HTML websites. My goal is to compare these two iframes and identify any differences. Consi ...

javascriptpythonhtmlselenium-webdriveriframe

Guide to automatically clicking a hyperlink using XPath

I am attempting to automatically click a button or a link as soon as the page loads. Currently, I am considering using the Xpath method for this purpose. Here's what I have experimented with so far: document.evaluate('/html/body/div/div[4]/div[2 ...

javascriptjquerybuttonxpathclick

Tips for designing a search bar using Angular

search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...

javascripthtmlangular

Problem with CSS transition on horizontal scrolling list items

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

csscss-transitionscss-animationsmousehover

Ways to mandate adjusting an option in <select> tag

Using the code $('select').change(function(){alert('changed');});, I am able to trigger an alert every time the option is changed. However, I also need to trigger the alert when the default option, which is the first one in the list, is ...

javascriptjqueryhtml

The HTML returned by Ajax does not appear to be aware of the JavaScript functions that have been applied to it

Currently, I am working on making AJAX requests that return elements in a table. Everything seems to be functioning well and displaying properly. However, I have noticed that any elements appended to the table which contain HTML like this: <div id="myI ...

javascriptjqueryhtmlajax

Converting HTML to CSV using PHP

I need assistance with exporting MySQL fields to CSV. I have successfully exported all fields except the one that contains HTML content. My MySQL table is structured as follows: Name: Address: Profile: The 'Name' and 'Address' fields ...

phphtmlmysqlarrayscsv

How can I send a JavaScript variable to a PHP function using an Ajax call?

I'm having trouble implementing an AJAX search form in WordPress that retrieves posts based on the search term being present in the post title. Below is the PHP function I've created for this purpose: function get_records_ajax($query) { $arg ...

javascriptphpjqueryajaxwordpress