Databases
StackOverflow2013
Postsdbo
POWrapping sets of elements from a list in DIVs using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWrapping sets of elements from a list in DIVs using jQuery
    primarykey
    data
    text
    <p>I have a very long list of names, each of which will be wrapped in <code>span</code> tags.</p> <p>Example:</p> <pre><code>&lt;span&gt;Yang Zajicek&lt;/span&gt; &lt;span&gt;Daniela Athey&lt;/span&gt; &lt;span&gt;Alanna Bumpers&lt;/span&gt; &lt;span&gt;Audry Waldron&lt;/span&gt; &lt;span&gt;Agnes Wininger&lt;/span&gt; &lt;span&gt;Tarah Mandelbaum&lt;/span&gt; &lt;span&gt;Dedra Paille&lt;/span&gt; &lt;span&gt;Codi Morrone&lt;/span&gt; &lt;span&gt;Shan Huntoon&lt;/span&gt; &lt;span&gt;Silas Zerangue&lt;/span&gt; &lt;span&gt;Thalia Saleh&lt;/span&gt; &lt;span&gt;Britt Spurlock&lt;/span&gt; &lt;span&gt;Miguelina Dasilva&lt;/span&gt; &lt;span&gt;Scott Scholz&lt;/span&gt; &lt;span&gt;Judith Badura&lt;/span&gt; &lt;span&gt;Alfredia Kidder&lt;/span&gt; &lt;span&gt;Jae Doty&lt;/span&gt; &lt;span&gt;Charise Blakeslee&lt;/span&gt; &lt;span&gt;Yen Axelson&lt;/span&gt; &lt;span&gt;Aurora Cochran&lt;/span&gt; &lt;span&gt;Lavina Crete&lt;/span&gt; &lt;span&gt;Monique Pate&lt;/span&gt; &lt;span&gt;Lady Edelstein&lt;/span&gt; &lt;span&gt;Clark Summitt&lt;/span&gt; &lt;span&gt;Milagros Whetstone&lt;/span&gt; &lt;span&gt;Tracy Tokarski&lt;/span&gt; &lt;span&gt;Wendolyn Crafts&lt;/span&gt; &lt;span&gt;Sandra Clyde&lt;/span&gt; &lt;span&gt;Alyse Giltner&lt;/span&gt; &lt;span&gt;Glennis Roos&lt;/span&gt; </code></pre> <p>What is now required is that I must go through them, like a loop or with <code>each()</code>, and I need to wrap groups of these with <code>&lt;div class="row"&gt;&lt;/div&gt;</code>. I'm familiar enough with <code>wrap()</code> and basic looping, but I'm running into too many bugs trying to determine the logic for the pattern of when and where to wrap.</p> <p>The pattern of wrapping is as follows:</p> <ul> <li>Go through all of the spans, wrapping them in groups of 5 and 6, repeating this pattern until all are wrapped. Add an in addition to the class mentioned above, add a 2nd class to each <code>div</code> related to the number of items.</li> </ul> <p>End result, regardless of how many spans I start with:</p> <pre><code> &lt;div class="row five"&gt; &lt;span&gt;Yang Zajicek&lt;/span&gt; &lt;span&gt;Daniela Athey&lt;/span&gt; &lt;span&gt;Alanna Bumpers&lt;/span&gt; &lt;span&gt;Audry Waldron&lt;/span&gt; &lt;span&gt;Agnes Wininger&lt;/span&gt; &lt;/div&gt; &lt;div class="row six"&gt; &lt;span&gt;Tarah Mandelbaum&lt;/span&gt; &lt;span&gt;Dedra Paille&lt;/span&gt; &lt;span&gt;Codi Morrone&lt;/span&gt; &lt;span&gt;Shan Huntoon&lt;/span&gt; &lt;span&gt;Silas Zerangue&lt;/span&gt; &lt;span&gt;Thalia Saleh&lt;/span&gt; &lt;/div&gt; &lt;div class="row five"&gt; &lt;span&gt;Britt Spurlock&lt;/span&gt; &lt;span&gt;Miguelina Dasilva&lt;/span&gt; &lt;span&gt;Scott Scholz&lt;/span&gt; &lt;span&gt;Judith Badura&lt;/span&gt; &lt;span&gt;Alfredia Kidder&lt;/span&gt; &lt;/div&gt; &lt;div class="row six"&gt; &lt;span&gt;Jae Doty&lt;/span&gt; &lt;span&gt;Charise Blakeslee&lt;/span&gt; &lt;span&gt;Yen Axelson&lt;/span&gt; &lt;span&gt;Aurora Cochran&lt;/span&gt; &lt;span&gt;Lavina Crete&lt;/span&gt; &lt;span&gt;Monique Pate&lt;/span&gt; &lt;/div&gt; &lt;div class="row five"&gt; &lt;span&gt;Lady Edelstein&lt;/span&gt; &lt;span&gt;Clark Summitt&lt;/span&gt; &lt;span&gt;Milagros Whetstone&lt;/span&gt; &lt;span&gt;Tracy Tokarski&lt;/span&gt; &lt;span&gt;Wendolyn Crafts&lt;/span&gt; &lt;/div&gt; &lt;div class="row six"&gt; &lt;span&gt;Sandra Clyde&lt;/span&gt; &lt;span&gt;Alyse Giltner&lt;/span&gt; &lt;span&gt;Glennis Roos&lt;/span&gt; &lt;/div&gt; </code></pre> <p>The last row can contain 1-6 items, which will vary, but the class name must follow the pattern of "row five" or "row six." The CSS will accommodate this outcome.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser1729506
    1. USuser1729506
    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
    1. VO
      singulars
      1. POWrapping sets of elements from a list in DIVs using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWrapping sets of elements from a list in DIVs using jQuery
      1. USj08691
      1. VTFavorite
    1. COYou do realize `row five` represents two classes `row` and `five` right? If you meant for this to be one class you'll need to modify your code to write the class like so: `row-five` or `rowFive` etc.
      singulars
      1. POWrapping sets of elements from a list in DIVs using jQuery
      1. USWar10ck
    2. COApologies for the confusion. They all need to be `row`, the extra class names correspond to the number of items in the row. They will have both class names in the end. Rows with five items need the additional class `five`, for example.
      singulars
      1. POWrapping sets of elements from a list in DIVs using jQuery
      1. USuser1729506
 

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