Question

I’m using jQuery UI Sortable to make a list “categorizable”. I’m stuck on the code to put items in the proper category when the page is loaded with existing data (either from the database or just from a prior form submit).

The html is a list with radio buttons:

<ul id="Main" class="sort">
  <li>
    <input type="radio" name="i1" id="i1_M" value="M">
    <input type="radio" name="i1" id="i1_A" value="A">
    <input type="radio" name="i1" id="i1_B" value="B" checked>
    <input type="radio" name="i1" id="i1_C" value="C">
    This is the first item
  </li>
  <li>
    <input type="radio" name="i2" id="i2_M" value="M" checked>
    <input type="radio" name="i2" id="i2_A" value="A">
    <input type="radio" name="i2" id="i2_B" value="B">
    <input type="radio" name="i2" id="i2_C" value="C">
    This is the second item
  </li>
  [... etc. ...]
</ul>
<ul id="CatA" class="sort subC"></ul>
<ul id="CatB" class="sort subC"></ul>
<ul id="CatC" class="sort subC"></ul>

What I’d like is some code to run on page load to move the items where option A is checked into list CatA, those with option B checked to CatB, etc., leaving items with option M checked where they are. I haven’t the faintest idea where to start, even after wasting a day searching for solutions and reading tutorial after tutorial (all of which claimed to be aimed at Javascript beginners, leaving me rather depressed about my apparent lack of intellectual capacity, but I digress). Help?

(The page is asp-classic, jQuery is version 1.4.2, jQuery UI is version 1.8.)

Answer 1

Something like this? (Demo)

$(document).ready(function(){
 $('#Main').find(':checked').each(function(){
  $(this).parent().appendTo( $('#Cat' + $(this).val() ));
 })
})

What it does is finds all checked radio button values, then moves the entire content into the categories. Since no #CatM is found, then it will silently fail and leave the M selected radio buttons in place.

Note: The radio button values must all be a single letter and capitalized for this script to work properly (it must match the category IDs).