基于 <li> 标签内 <p> 的 innerHTML 的 HTML 拆分列表答案

【问题标题】：HTML split list based on innerHTML of <p> inside of the <li> tag基于 <li> 标签内 <p> 的 innerHTML 的 HTML 拆分列表
【发布时间】：2017-09-19 14:27:17
【问题描述】：

我有一个清单。列表中的每个项目都包含一个具有相同类的<p> 元素。我想要做的是根据 p 元素的 innerHTML 值将 li 标签分成两列。例如：

<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>

我需要创建一个算法来检查 p 标签的 innerHTML。如果这些是电子书或书籍，则 li 将转到左侧列。如果它们是其他任何东西，它们将转到右侧的列。

我曾想过使用简单的 CSS 多列来创建列，但我不确定是否可以使用该方法将 li 标签拆分为不同的列。

有谁知道如何做到这一点？

谢谢

【问题讨论】：

请花一些时间阅读帮助页面，尤其是名为"What topics can I ask about here?" 和"What types of questions should I avoid asking?" 的部分。更重要的是，请阅读the Stack Overflow question checklist。您可能还想了解Minimal, Complete, and Verifiable Examples。

标签： javascript jquery css html-lists multiple-columns

【解决方案1】：

试试这个：

$(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>

【讨论】：

这很棒，它可能会起作用！我没有直接控制 HTML，但我可以通过 javascript 在 ul 元素内创建 div。我会试一试，告诉你它是怎么回事！谢谢
这很棒！我不得不稍微调整一下以附加 DIV，因为我不控制页面布局，但是一旦处理好，您的解决方案就会像魅力一样工作！
我希望你不介意我问，但是如果我想先检查是否有任何书籍/电子书并且只有运行该功能，我该如何添加？因为就像现在一样，即使没有书，该功能也会拆分屏幕，我最终会得到一个完全空的列。

【解决方案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>

【讨论】：

有没有办法在没有桌子的情况下做到这一点？该列表是预先生成的，我无法控制其结构。
@NimrodYanai 这不是你所期望的吗？
从运行脚本的外观来看并非如此。这只是为列表的行着色。我想要的是将列表拆分为列。
@NimrodYanai 我再次重新编辑了我的答案，并且我只使用了jQuery 而没有触及HTML 部分。请运行code sn-p查看最终结果
这似乎成功了。我投了赞成票，因为它似乎有效，但堆栈溢出不会接受同一问题的两个答案，而且我已经在您上方部署了解决方案（相对相似）。

【解决方案3】：

使用下面的代码：

$(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");
        }
    });
});

希望这会有所帮助。

【讨论】：

【解决方案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>

【讨论】：