Databases
StackOverflow2013
Postsdbo
POjQuery - contains / filter and insertBefore to rearrange a list (div > ul > li) issues
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - contains / filter and insertBefore to rearrange a list (div > ul > li) issues
    primarykey
    data
    text
    <p>After a paid integration between our E-Commerce system and POS system, my online store is now showing sizes in Alphabetical/Chronological order. Eg. <code>L | M | S | XL</code> instead of <code>S | M | L | XL</code> And</p> <pre><code>7 | 7 1/2 | 7 1/4 | 7 1/8 | 7 3/8 </code></pre> <p>This is because the size attributes/options are now being pulled from the POS system and is unique for each product (silly, I know but that's how the integration works). This means that it's not possible to manually select the order for them to appear as this will require thousands of manual changes which defeats the purpose of the integration.</p> <p>I have come up with a jQuery solution but have ran into a few problems. I have applied this to Numerical and Alphabetical sizing and have the same problem.</p> <pre><code>$(".Value li:contains('XL')").insertBefore($(".Value li:contains('XXL')")); $(".Value li:contains('L')").insertBefore($(".Value li:contains('XL')")); $(".Value li:contains('M')").insertBefore($(".Value li:contains('L')")); $(".Value li:contains('S')").insertBefore($(".Value li:contains('M')")); $(".Value li:contains('XS')").insertBefore($(".Value li:contains('S')")); </code></pre> <p>This works fine until you get to a single character value which has a sister value. In other words that code will rearrange L M S into S M L just fine, but it runs into problems if there is a XS or XL, or in the case of numerical sizes getting down to a single digit. Such as a size 7 if there are 7 1/4, 7 1/8 etc. This is obviously because of the .contains() function. </p> <p>I have tried using .filter() but I can't get it to select the elements I want let alone .insertBefore</p> <p>Thanks.</p> <hr> <p>Edit with HTML as requested:</p> <pre><code>&lt;div class="Value"&gt; &lt;ul&gt; &lt;li&gt; &lt;label&gt;&lt;input name="variation[1]" type="radio" class="RadioButton" value="5429" /&gt; XL&lt;/label&gt; &lt;/li&gt; &lt;li&gt; &lt;label&gt;&lt;input name="variation[1]" type="radio" class="RadioButton" value="5430" /&gt; 2XL&lt;/label&gt; &lt;/li&gt; &lt;li&gt; &lt;label&gt;&lt;input name="variation[1]" type="radio" class="RadioButton" value="5431" /&gt; M&lt;/label&gt; &lt;/li&gt; &lt;li&gt; &lt;label&gt;&lt;input name="variation[1]" type="radio" class="RadioButton" value="5432" /&gt; L&lt;/label&gt; &lt;/li&gt; &lt;li&gt; &lt;label&gt;&lt;input name="variation[1]" type="radio" class="RadioButton" value="5433" /&gt; S&lt;/label&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <hr> <p>Edit 2</p> <p>As can be seen from the above HTML and what I've just realised - it's not displaying in Alphabetical / Chronological order of the labels (size), but rather chronologically for the radio buttons value. As mentioned this is generated dynamically by the shopping cart when importing products from our POS.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJames
    1. USJames
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery - contains / filter and insertBefore to rearrange a list (div > ul > li) issues
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPlease show us your actual HTML for the sizes. Is each size string in it's own LI?
      singulars
      1. POjQuery - contains / filter and insertBefore to rearrange a list (div > ul > li) issues
      1. USjfriend00
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload