Question

我有一份清单。列表中的每个项目都包含具有相同类的<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标签拆分为不同的列。

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

谢谢

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

Answer 2

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

希望这会有所帮助。

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分组列表基于</p> <li>标签内的<p>的innerHTML

4 个答案: