Reorder a specific character within an array using Javascript

I am a beginner in JavaScript and I'm hoping for some assistance. I have an HTML list with a select option, and I want to sort the list based on the selected character.

Specifically, I would like to arrange the "Z" options first, followed by the "B" options. The selected option's name can change dynamically. Is there a way to achieve this sorting after the character Z?

<ul id="pi" class="list" data-enhance="false">
  <li class="ui-state-default ui-sortable-handle">
    <div class="tt_wrapper tooltipstered">
      <select
        data-mini="false"
        data-native-menu="true"
        name="p_01"
        id=""
        class=""
        disabled=""
      >
        <option value=""></option>
        <option value="Z">Z</option>
        <option value="B" selected="selected">B</option>
      </select>
    </div>
  </li>
  <li class="ui-state-default ui-sortable-handle">
    <div class="tt_wrapper tooltipstered">
      <select
        data-mini="false"
        data-native-menu="true"
        name="p_02"
        id=""
        class=""
        disabled=""
      >
        <option value=""></option>
        <option value="Z" selected="selected">Z</option>
        <option value="B">B</option>
      </select>
    </div>
  </li>
</ul>
javascripthtmljquerycss

Answer №1

Arrange the li elements by sorting them based on the value of the "selected" attribute in the "select" element.

var newLi = $("li").sort(function(ctrl1, ctrl2) {
  var returnVal = $(ctrl2).find("select").val().localeCompare($(ctrl1).find("select").val());
  return returnVal;
});

$("#pi").empty().append(newLi);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="pi" class="list" data-enhance="false">
  <li class="ui-state-default ui-sortable-handle">
    <div class="tt_wrapper tooltipstered">
      <select data-mini="false" data-native-menu="true" name="p_01" id="" class="" disabled="">
        <option value=""></option>
        <option value="Z">Z</option>
        <option value="B" selected="selected">B</option>
      </select>

    </div>
  </li>
  <li class="ui-state-default ui-sortable-handle">
    <div class="tt_wrapper tooltipstered">
      <select data-mini="false" data-native-menu="true" name="p_02" id="" class="" disabled="">
        <option value=""></option>
        <option value="Z" selected="selected">Z</option>
        <option value="B">B</option>
      </select>
    </div>
  </li>

  <li class="ui-state-default ui-sortable-handle">
    <div class="tt_wrapper tooltipstered">
      <select data-mini="false" data-native-menu="true" name="p_02" id="" class="" disabled="">
        <option value=""></option>
        <option value="X" selected="selected">X</option>
        <option value="B">B</option>
      </select>
    </div>
  </li>

</ul>

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

What could be causing the incorrect margins in IE after my animation?

I have implemented jQuery Masonry for the dynamic layout on my website. However, I am facing a problem where the layout does not behave as expected when I trigger Masonry after performing a .load() event. To see the issue in action, visit , click on any ...

jqueryjquery-animatejquery-callbackjquery-masonry

two divs side by side with adjustable sizes

Is there a way to achieve a typical forum post layout with user info on the left and the post itself using CSS? I tried wrapping two divs around another div and using float, but encountered an issue where the floated div remains on the left instead of next ...

phphtmlcss

Troubles encountered with switching npm registry

In my Vue 2.7 project with vuetify, I initially installed dependencies using a custom local npm registry, acting as a proxy to the default npm. As the project has expanded, I've started using git actions to deploy to a development server, with varying ...

javascriptnode.jsnpmpackage-lock.json

Place a div at the bottom of a flexbox while adding some padding around it

Here's what I'm dealing with: .flex-container { display: flex; justify-content: center; padding: 5%; position: relative; } .box1 { position: absolute; bottom: 0; width: 100%; height: 100%; } <div class="flex-container"> ...

htmlcssflexbox

Looking to implement client-side JavaScript validation prior to utilizing jQuery AJAX validation

I'm struggling to make sure that my validate(form) function runs "before" my ajax function. I would appreciate any suggestions on how to connect the two and ensure they run in sequence when the form is submitted. Thank you! <script type="text/ ...

javascriptjqueryajaxvalidation

Tips for aligning divs side by side with smaller divs stacked below them

I have a collection of dynamically generated divs that act as panels for selecting different options. These divs can be categorized into two types: regular and short. The height of the regular divs is determined using JavaScript to match the height of the ...

csshtml

Finding your way through Bootstrap Datepicker using the Previous and Next Buttons

Is there a way to implement Previous and Next Button functionality for navigating a Bootstrap Datepicker using jQuery, similar to the illustration below? https://i.sstatic.net/e9I7P.png I attempted the following approach: function PrevNext(isnextbtn) ...

javascriptjquerybootstrap-datepicker

Searchbox aligned to the right using Bootstrap

Looking to place a searchbox on the right next to another container aligned left: <div> <div class="pull-left"><span>SOME TEXT</span></div> <div class="pull-right"> <div class="row"> ...

csstwitter-bootstrap

Achieve vertical alignment of a span text that spans multiple lines within an inline-block element

I am facing an issue with this code as the phrase "lorem ipsum" is not positioned in the center of its parent div: <div style="width: 500px; height: 500px; background-color: #f0f0f0"> <div style="display: inline-block; width: 100px; height: 1 ...

htmlcss

Error with Display of ASCII Character 62 in Superfish Menu

Currently, I have implemented the Superfish menu on my website. In order to indicate sub-menus within my menus, I have opted to utilize the character entity code &#62;, which historically has represented ">". Oddly enough, while viewing my website ...

htmlcssinternet-explorer-8superfish

Troubleshooting: Issues with PHP script and JSON response connectivity

I am in the process of developing a form that allows users to upload images and other data. My aim is for this form to provide JSON validation or success responses through the AJAX success function. However, I have encountered an issue where the PHP scrip ...

phpjqueryjsonajax

Utilizing Codeigniter for transmitting JSON data to a script file

When querying the database in my model, I use the following function: function graphRate($userid, $courseid){ $query = $this->db->get('tblGraph'); return $query->result(); } The data retrieved by my model is then encoded in ...

javascriptcodeigniterjsonexternal-script

"Revolutionary jQuery plugin designed to function independently of HTML elements

Is it possible to create a jQuery plugin that can be executed without the use of an element selector? Typically, we use: $('#myElementID').myPluginFunction(myVariables); But, is there a way to do it like this instead? $.myPluginFunction(my ...

javascriptjquery

Aggregate array based on specified criteria in ReactJS

Let's consider the following array data: array = [ { id: 1, count: 0.5 cost: 100 user: {id: 1, name: "John 1"}, type: {id: 1, name: "T1"}, period: {id: 1, name: "2021"} ...

javascriptarraysreactjsgrouping

Can we find a solution to optimize "Crystal Reports" for mobile browsers and make it responsive?

I'm in the process of making my entire Asp.net application responsive for mobile browsers by utilizing Bootstrap. However, I've encountered a challenge with making Crystal Report responsive for mobile browsers. If anyone has any advice on how to ...

cssasp.nettwitter-bootstrapcrystal-reports

Converting xpath location to pixels: A step-by-step guide

Is there a way to convert an Xpath location or an element ID into pixel coordinates (X,Y) using Java? I have searched extensively but have not been able to find a clear and simple answer. ...

javahtmlseleniumxpathselenium-webdriver

specify environment using command line parameters in protractor

Can Protractor handle specifying environment names in the command line? I'm interested in having specific URLs selected for testing based on the name provided, as defined in my .env file. ...

javascriptprotractor

Obtain attribute values as an array from a group of elements by utilizing jQuery

Using jQuery, I have the following code: var x = $('.boxes > input:checked'); However, I am struggling to figure out how to retrieve an array of id values from x. I am looking for something like this: var y = x[id]; // y should be an array ...

jquery

Troubleshooting a perplexing problem with an unresponsive AngularJS directive

Here is the code from my app.js file (main JavaScript file) var currentUserId; window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile', 'myApp.Registermdl', 'ngProgress', &apo ...

javascriptangularjs

"Troubleshooting the issue with the jQuery function not being able to trigger a

When I press the enter key in an input field, I want to be able to select options from a searchable dropdown menu. However, this functionality is not working and the alert message I set up is also not functioning as expected. <div class="form-group m-f ...

javascriptjquerycsshtmlbootstrap-4