Question

这是我的示例HTML尝试为业务功能实现一些过滤逻辑。我们有一个复杂的结构HTML，我只是硬编码了一些示例HTML来做一些示例

<ol class="list_1">
<li class="page_1">one</li>
<li class="page_1">two</li>
<li><span class="ing_page_1">three
</span><ol class="list_2">
<li class="page_1">sub 1</li>
<li class="page__1">sub 2</li>
<li class="page__2">sub 3</li>
</ol>
</li>
<li class="page_2">four</li>
<li class="page_2">five</li>
</ol>

我试图过滤列表以获得低于结果（DOM元素）。

查询将DOM元素作为结果，这样我就可以为每个列表添加一些属性

List 1 and its pages(List 1 - One, Two , Three , Four , Five)
List 2 and its pages(List 2 - Sub 1,Sub 2 , Sub 3)

类'ing_page_1'也属于第1页但是当我有嵌套结构时，我有一些用ing _创建的特殊类来处理其他逻辑，它是一个常量

添加了我的小提琴（https://jsfiddle.net/pjagana/ubk8ngha/6/）和控制台语句，因为我的过滤器也总是导致子列表。任何帮助都会有所帮助

Answer 1

您必须遍历所有直接子li并删除非span（或attr * = ing_page），然后获取文本。

也许你可以试试这个：

＆＃13;

function getList(parent) {
  var temp = parent + " and its pages (" + parent + " - ";

  $("." + parent + ' > li').each(function() { // Find all immediate li children
    // Create a clone
    var $clone = $(this).clone();
    // remove non-span elements and remove them so only span elements would be left (you can replace this with ':not([class&=ing_page])' or something similar if needed)
    $clone.find(':not(span)').remove();
    // clean the text
    temp += $.trim($clone.text().replace(/\s{2,}/gim, " "));

    if ($(this).is(':not(:last-child)'))
      temp += ", ";
  });

  return temp + ")";
}

console.log(getList('list_1') + "\n" + getList('list_2'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="list_1">
  <li class="page_1">one</li>
  <li class="page_1">two</li>
  <li>
    <span class="ing_page_1">three</span>
    <ol class="list_2">
      <li class="page_1">sub 1</li>
      <li class="page__1">sub 2</li>
      <li class="page__2">sub 3</li>
    </ol>
  </li>
  <li class="page_2">four</li>
  <li class="page_2">five</li>
</ol>

＆＃13;

Jquery - 根据类过滤级联列表（Seprate列表和嵌套列表）

1 个答案: