獲取具體<li>使用 jquery 標記值

Question

我正在嘗試獲取 "Pen" 、 "All Pen" 值。

這是我嘗試過的：-請查看代碼並分享您的想法 請查看代碼並分享您的想法

 var filtered_category = jQuery('ul.pc_filter_middle-stage2-list ul li:first-child').contents().get(0).nodeValue; var parent_filtered_category = jQuery('ul.pc_filter_middle-stage2-list ul li:first-child').parents().find('#accordionItemhide li').contents().get(0).nodeValue; console.log(filtered_category); console.log(parent_filtered_category);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ok_filter_middle-stage2-container active" style="display: block;"> <ul class="ok_filter_middle-stage2-list-title"><li><strong>Category</strong></li></ul> <ul class="ok_filter_middle-stage2-list"> <div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper"> <li style="font-weight: normal;">Pencil<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li> <div class="ok_filter_middle-stage2-category-list sub-category1"> <ul role="listbox" tabindex="0" aria-label="folder list"> <li data-value="2" tabindex="-1" role="option" class="active" aria-selected="false">Pencils<span>(200)</span></li><li data-value="8" tabindex="-1" role="option" class="active">Pencils<span>(300)</span></li> </ul> </div> </div> <div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper"> <li style="font-weight: normal;">Pen<span>(1200)</span></li> <div class="ok_filter_middle-stage2-category-list sub-category2"> <ul role="listbox" tabindex="0" aria-label="folder list"> <li data-value="All Pen" tabindex="-1" role="option" aria-selected="false">All Pen<span>(10000)</span></li> </div> </ul> </div>

Answer 1

您的選擇器存在一些問題。

1. 由於屬性id是唯一的，您可以直接在選擇器中使用它。

2. 您可以使用text()獲取文本內容。

嘗試以下方式：

 var filtered_category = jQuery('ul.ok_filter_middle-stage2-list ul li:first-child').text(); var parent_filtered_category = jQuery('#accordionItemhide li').text(); console.log(filtered_category); console.log(parent_filtered_category); var shows = jQuery('.ok_filter_middle-stage2-list_wrapper:eq(1) li:eq(0)').text(); console.log(shows); var all_shows = jQuery('.ok_filter_middle-stage2-list_wrapper:eq(1) ul li:eq(0)').text(); console.log(all_shows);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ok_filter_middle-stage2-container active" style="display: block;"> <ul class="ok_filter_middle-stage2-list-title"><li><strong>Category</strong></li></ul> <ul class="ok_filter_middle-stage2-list"> <div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper"> <li style="font-weight: normal;">Clothing<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li> <div class="ok_filter_middle-stage2-category-list sub-category1"> <ul role="listbox" tabindex="0" aria-label="folder list"> <li data-value="2" tabindex="-1" role="option" class="active" aria-selected="false">Bodysuit<span>(200)</span></li><li data-value="8" tabindex="-1" role="option" class="active">Graphic Tees<span>(300)</span></li> </ul> </div> </div> <div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper"> <li style="font-weight: normal;">Shoes<span>(1200)</span></li> <div class="ok_filter_middle-stage2-category-list sub-category2"> <ul role="listbox" tabindex="0" aria-label="folder list"> <li data-value="All Shoes" tabindex="-1" role="option" aria-selected="false">All Shoes<span>(10000)</span></li> </ul> </div> </div> </ul> </div>

Answer 2

我認為這可以解決您的問題：

$('.ok_filter_middle-stage2-list_wrapper').each(function() {
      console.log($(this).find('li').text())
    });

使用 .each() 我們可以遍歷元素並最終找到您的孩子。

Answer 3

下面示例中的函數會很有幫助。

輸出中項目的順序與搜索詞數組中項目的順序一一相關。

因此，對於搜索數組['Clothing','Bodysuit','Shoes','All Shoes'] ，輸出將是["2200","200","1200","10000"] 。

 function findValues(searchTerms) { let search = new RegExp('^('+searchTerms.join('|')+')','i'); return lis = Object.values($('.ok_filter_middle-stage2-list li')).filter(x => search.test(x.textContent)).map(x => $(x).find('span').text().replace(/(\\(|\\))/g,'')); } let out = findValues(['Clothing','Bodysuit']); console.log(out); out = findValues(['Shoes','All Shoes']); console.log(out);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ok_filter_middle-stage2-container active" style="display: block;"> <ul class="ok_filter_middle-stage2-list-title"><li><strong>Category</strong></li></ul> <ul class="ok_filter_middle-stage2-list"> <div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper"> <li style="font-weight: normal;">Clothing<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li> <div class="ok_filter_middle-stage2-category-list sub-category1"> <ul role="listbox" tabindex="0" aria-label="folder list"> <li data-value="2" tabindex="-1" role="option" class="active" aria-selected="false">Bodysuit<span>(200)</span></li><li data-value="8" tabindex="-1" role="option" class="active">Graphic Tees<span>(300)</span></li> </ul> </div> </div> <div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper"> <li style="font-weight: normal;">Shoes<span>(1200)</span></li> <div class="ok_filter_middle-stage2-category-list sub-category2"> <ul role="listbox" tabindex="0" aria-label="folder list"> <li data-value="All Shoes" tabindex="-1" role="option" aria-selected="false">All Shoes<span>(10000)</span></li> </div> </ul> </div>

Answer 4

讓我們首先嘗試修復您的 HTML。 考慮到我不知道您的程序或站點是做什么的，我只是重構了您擁有的所有內容：

 $(document).ready(() => { const okFilter = $('.ok-filter'); const bodyContent = okFilter.find('.ok-filter__ul--body'); const secondCategory = bodyContent.find('.ok-filter_wrapper--category:nth-child(2)'); const secondCategoryListElements = secondCategory.find('.ok-filter__li'); const values = secondCategoryListElements.get().map((li) => li.childNodes[0].nodeValue, []); console.log(values); });

 .ok-filter--active { display: block; } .ok-filter__li--title { font-weight: bold; } .ok-filter__li--item { font-weight: normal; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ok-filter ok-filter--active"> <ul class="ok-filter__ul ok-filter__ul--header"> <li class="ok-filter__li ok-filter__li--title">Category</li> </ul> <ul class="ok-filter__ul ok-filter__ul--body"> <div class="ok-filter__wrapper ok-filter_wrapper--category"> <li class="ok-filter__li ok-filter__li--item">Clothing<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li> <div class="ok-filter__wrapper ok-filter__wrapper--sub-category"> <ul class="ok-filter__ul" role="listbox" tabindex="0" aria-label="folder list"> <li class="ok-filter__li ok-filter__li--active" data-value="2" tabindex="-1" role="option" aria-selected="false">Bodysuit<span>(200)</span></li> <li class="ok-filter__li ok-filter__li--active" data-value="8" tabindex="-1" role="option">Graphic Tees<span>(300)</span></li> </ul> </div> </div> <div class="ok-filter__wrapper ok-filter_wrapper--category"> <li class="ok-filter__li ok-filter__li--item">Shoes<span>(1200)</span></li> <div class="ok-filter__wrapper ok-filter__wrapper--sub-category"> <ul class="ok-filter__ul" role="listbox" tabindex="0" aria-label="folder list"> <li class="ok-filter__li" data-value="All Shoes" tabindex="-1" role="option" aria-selected="false">All Shoes<span>(10000)</span></li> </ul> </div> </div> </ul> </div>

在腳本部分，您有一個如何獲取請求值的示例。 我使用find()函數將它們分開，以便您更好地控制和了解如何到達它們。 我必須對你誠實。 如果您不打算支持 IE，那么使用 jquery 只會減慢您的速度。 您可以使用querySelector()和querySelectorAll()代替。

其次，嘗試從文本節點獲取數據是一種非常糟糕的做法。 如果您想要為用戶更改一個值，您可以使用屬性將數據存儲在給定元素中，或者使用 HTML5 中的<data>元素。 您也可以將其包裝到<span>標簽中，以確保您選擇了正確的元素。

祝你好運