Two column list based on data-* attribute

Question

It is possible to create a two column appearance in a list based on a data attribute of an element? My HTML which can't really be modified into two lists (even using JS breaks other functionality on the page) looks like:

<ul>
    <li data-list="general_results">general text1</li>
    <li data-list="general_results">general text2</li>
    <li data-list="general_results">general text3</li>
    <li data-list="category_results">category text1</li>
    <li data-list="category_results">category text2</li>
    <li data-list="category_results">category text3</li>
    <li data-list="category_results">category text4</li>
</ul>

I want the output to appear as:

general text1               category text1
general text2               category text2
general text3               category text3
                            category text4

It is same to assume that the will always have the elements grouped in order.

I'm not sure how to achieve this with the desired output. Floating places elements in a left to right fashion instead of a vertical layout. Any ideas?

Pretty much but only visually. Kinda need it to stay together semantically. — jharry, Jul 23 '15 at 06:51
how about using jquery?. you can do something like this. `$('ul li[data-list=general_results]').each(function(){ alert($(this).html()); });` — Sam Teng Wong, Jul 23 '15 at 06:52
you need to get the value first.... put it on an array... and do a foreach.. append them on different element. ex. `div` — Sam Teng Wong, Jul 23 '15 at 07:01
http://stackoverflow.com/questions/17005407/creating-a-two-column-unordered-list I think this will help you — Jara Skuder, Jul 23 '15 at 07:13
Check out my answer... hope that's what you're looking for.. =) — Sam Teng Wong, Jul 23 '15 at 07:16

score 0 · Answer 1 · answered Jul 23 '15 at 07:01

0

If you insert a blank line you can achieve this quite easily using column-count.

div#twoColumn {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    line-height:1.5em;
    list-style-type:none;
}

<div id="twoColumn">
    <ul>
    <li data-list="general_results">general text1</li>
    <li data-list="general_results">general text2</li>
    <li data-list="general_results">general text3</li>
     <li data-list="general_results">&nbsp;</li>
    <li data-list="category_results">category text1</li>
    <li data-list="category_results">category text2</li>
    <li data-list="category_results">category text3</li>
    <li data-list="category_results">category text4</li>
</ul>
</div>

answered Jul 23 '15 at 07:01

Rachel Gallen

27,943
21
72
81

I do like this solution but although the grouping will always together, the number of each may vary so I can't reliably add or remove to create equal numbers. – jharry Jul 23 '15 at 07:07
1

@jharry i dunno how you'll do it then unless you separate them into separate lists? http://jsfiddle.net/14uLept1/ – Rachel Gallen Jul 23 '15 at 07:23
I did split them into lists via JS but then the issue is that jQuery UI Autocomplete functionality breaks. – jharry Jul 23 '15 at 14:04

Sam Teng Wong · Answer 2 · 2015-07-23T07:20:21.563

Here's what I did...

HTML CODE.. I get the data-list attr value then filter through it and append on different divs.

<ul>
<li data-list="general_results">general text1</li>
<li data-list="general_results">general text2</li>
<li data-list="general_results">general text3</li>
<li data-list="category_results">category text1</li>
<li data-list="category_results">category text2</li>
<li data-list="category_results">category text3</li>
<li data-list="category_results">category text4</li>
</ul>

<div id="gen_text_here">
</div>
<br />
<div id="cat_text_here">
</div>

JQUERY CODE:

$('ul li').each(function(){

  if($(this).attr("data-list") == 'general_results'){
     $('#gen_text_here').append($(this).attr("data-list") + '<br />');
  }else if($(this).attr("data-list") == 'category_results'){
     $('#gen_text_here').append($(this).attr("data-list")  + '<br />');
  }

});

score 0 · Answer 3 · answered Jul 23 '15 at 07:42

Not a very elegant solution but it does the trick:

[data-list="general_results"] {
    float:right;
    clear:right;
}

Fiddle here: http://jsfiddle.net/qUAT6/1113/

But I don't support this. The right solution is to separate your elements in two lists.

Two column list based on data-* attribute

3 Answers3