Jquery - 基於類篩選級聯列表（Seprate列表和嵌套列表）

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 s並刪除非跨度（或attr * = ing_page），然後獲取文本。

也許你可以試試這個：

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'));

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