locked
How to split an unordered list into 2 columns - jquery RRS feed

  • Question

  • User668774724 posted

    I'm writing out some html data using rest api see below code snippets

     I can render the below but i think i need it re ordered the elements accordingly using jquery/jscript

    Below is what i have currently

    <div id="eventsSection">
        <div id="eventsContent">
            <li id="eventsRow" style="display: block;">
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text1
                </div>
            </li>
            <li id="eventsRow" style="display: block;">
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text2
                </div>
            </li>
    
        </div>
    
    </div>

    What i'm after is this

    <div id="eventsSection">
        <div id="eventsContent">
            <li id="eventsRow" style="display: block;">
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text1
                </div>
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text2
                </div>
            </li>
            <li id="eventsRow" style="display: block;">
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text3
                </div>
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text4
                </div>
            </li>
    
        </div>
    
    </div>

    Thanks in advance and much appreciated

    Sunday, September 15, 2019 11:29 PM

All replies

  • User-719153870 posted

    Hi naijacoder74,

    What i'm after is this

    <div id="eventsSection">
        <div id="eventsContent">
            <li id="eventsRow" style="display: block;">
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text1
                </div>
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text2
                </div>
            </li>
            <li id="eventsRow" style="display: block;">
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text3
                </div>
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text4
                </div>
            </li>
    
        </div>
    
    </div>

    Not sure what you are loooking for, but by the title of this thread, maybe Javascript to turn an unordered list into multiple columns is what you want?

    In the link i provide, there's a really convenient plugin: easy-list-splitter and you can see how to use it in your html here.

    Here's a simple demo:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script type='text/javascript' src='http://rawgit.com/fzondlo/jquery-columns/master/jquery-columns-plugin.js'></script>
        <script>
            $(function () {
                $('.my-list').cols(2);
            })
        </script>
        <style>
            ul.my-list {
                width: 100px;
                float: left;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="eventsSection" class="my-list">
                <ul class="my-list">
                    <li>
                        <div id="eventItem1" class="eventItem" clickid="0">
                            Some text1
                        </div>
                        <div id="eventItem2" class="eventItem" clickid="0">
                            Some text2
                        </div>
                    </li>
                    <li>
                        <div id="eventItem3" class="eventItem" clickid="0">
                            Some text3
                        </div>
                        <div id="eventItem4" class="eventItem" clickid="0">
                            Some text4
                        </div>
                    </li>
                </ul>
            </div>
        </form>
    </body>
    </html>

    The result of this demo:

    Hope this could help.

    Best Regard,

    Yang Shen

    Monday, September 16, 2019 2:43 AM
  • User668774724 posted

    Thanks Yang and correct. Will give it a shot but i don't what something that is css based.

    What i want is to be able to re order the elements as i would be using a plugin later  for example to paginate the data
    So let say  i have the below snippet code
    I want to be bale to  get the second div id=eventItem1 and append it to the first  div="eventItem1 " so i can i have 2 divs under the li id="eventsRow".

    Hope this makes sense

    <div id="eventsSection">
        <div id="eventsContent">
            <li id="eventsRow" style="display: block;">
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text1
                </div>
            </li>
            <li id="eventsRow" style="display: block;">
                <div id="eventItem1" class="eventItem" clickid="0">
                    Some text2
                </div>
            </li>
    
        </div>
    
    </div>
    Monday, September 16, 2019 7:53 AM
  • User-719153870 posted

    Hi naijacoder74,

    Sorry but it's still very confusing. I mean is there any rule that tell the jQuery which <div> it should choose to appen to which another <div>?

    Or if you already know you want to append the second div to the first, what you want the jquery do?

    And in your first post, where do you get the third and fourth div from?

    Are you trying to get the number(n+1) <li>'s div into the number (n) <li>, for example, get the 6th <li>'s div into the 5th<li>? But what does this have to do with columns?

    We might need a better description,explaination about the columns thing and any rule in this whole operation.

    Best Regard,

    Yang Shen

    Monday, September 16, 2019 9:08 AM
  • User668774724 posted

    Thanks for your response Yang.

    You are right i think i might have confused you more.

    Will look at it again and if i have any question will post a more detailed output for your consideration

    Tuesday, September 17, 2019 12:13 AM