HTML split list based on innerHTML of <p> inside of the <li> tag

Question

I have a list. Each item in the list contain a <p> element with the same class. What I want to do is split the li tags into two columns based on the innerHTML value of the p elements. For example:

<li class="list-li">
  <span>Data</Span>
  <p class="test">Book</p>
</li>
<li class="list-li">
  <span>Data</Span>
  <p class="test">Article</p>
</li>
<li class="list-li">
  <span>Data</Span>
  <p class="test">eBook</p>
</li>
<li class="list-li">
  <span>Data</Span>
  <p class="test">Article</p>
</li>

What I need is to create an algorithm that checks for the innerHTML of the p tags. If those are eBooks or Books, then the li will go to the left column. If they are anything else, they will go to the right column.

I thought of using simple CSS multi-column to create the columns but I'm not sure I can split the li tags into different columns using that method.

Does anyone have any idea how this can be done?

Thank you

Answer 1

Try this:

 $(function(){ $('.list-li').each(function(){ var $this = $(this), innerHTML = $this.find('.test').html(); (innerHTML === 'Book' || innerHTML === 'eBook') ? $this.appendTo('.left') : $this.appendTo('.right'); }); });

 .flex-wrapper { display: flex; } .list-li { list-style-position: inside; } .half-col { box-sizing: border-box; background-color: #eee; padding: 10px; flex-grow: 1; } .half-col:first-child { border-right: 1px solid #ccc; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="list-li"> <span>Data</span> <p class="test">Book</p> </li> <li class="list-li"> <span>Data</span> <p class="test">Article</p> </li> <li class="list-li"> <span>Data</span> <p class="test">eBook</p> </li> <li class="list-li"> <span>Data</span> <p class="test">Article</p> </li> <div class="flex-wrapper"> <div class="half-col left"> </div> <div class="half-col right"> </div> </div>

Answer 2

 $(function () { $( "li:last" ).after(function() { return "<td id='left'> </td><td id='right'> </td>"; }); $("li ").each(function () { if($(this).find('p').text()!="Book" & $(this).find('p').text()!="eBook"){ $(this).appendTo('#right'); } else { $(this).appendTo('#left'); } }); });

 .test{ width:100px; } span{ padding-left: 0px; color: #ff890b; font-size: 13pt; font-weight: 600; font-family: Calibri; } li{ list-style-type: none; } #right{ border-left: 1px solid #ccc!important; padding-left:50px; }

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <li class="list-li"> <span>Data</Span> <p class="test">Book</p> </li> <li class="list-li"> <span>Data</Span> <p class="test">Article</p> </li> <li class="list-li"> <span>Data</Span> <p class="test">eBook</p> </li> <li class="list-li"> <span>Data</Span> <p class="test">Article</p> </li>

Answer 3

Use the below code:

$(document).ready(function () {
    $('li p.test').each(function(key, val){
        if( $(val).html() == 'eBook' || $(val).html() == 'Book' ) {
            $(val).parent('li').addClass("pull-left");
        } else {
            $(val).parent('li').addClass("pull-right");
        }
    });
});

Hope this will help.

Answer 4

 $(document).ready(function(e){ var items = $('.list-li'); $.each(items, function(index,item){ var element = $(item); switch( element.find('p.test').text() ){ case 'Book': case 'eBook': element.addClass( 'left' ); break; case 'Article': element.addClass( 'right' ); break; } }); })

 .left{ float:left } .right{ float:right }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <li class="list-li"> <span>Data</Span> <p class="test">Book</p> </li> <li class="list-li"> <span>Data</Span> <p class="test">Article</p> </li> <li class="list-li"> <span>Data</Span> <p class="test">eBook</p> </li> <li class="list-li"> <span>Data</Span> <p class="test">Article</p> </li> </body> </html>

HTML split list based on innerHTML of <p> inside of the <li> tag

Question

4 answers

solution1
3 ACCPTED 2017-09-19 15:07:35

solution2
1 2017-09-19 14:56:30

solution3
0 2017-09-19 15:04:22

solution4
0 2017-09-19 15:10:11

HTML split list based on innerHTML of <p> inside of the <li> tag

Question

4 answers

solution1 3 ACCPTED 2017-09-19 15:07:35

solution2 1 2017-09-19 14:56:30

solution3 0 2017-09-19 15:04:22

solution4 0 2017-09-19 15:10:11

solution1
3 ACCPTED 2017-09-19 15:07:35

solution2
1 2017-09-19 14:56:30

solution3
0 2017-09-19 15:04:22

solution4
0 2017-09-19 15:10:11