如何使用js過濾表中ul的li？想過濾第 6 個課程，我只能過濾第一個
想過濾第 6 個課程，我只能過濾第一個
$('#courses').change(function() {
var selection = $(this).val();
var dataset = $('.student-details-table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:nth-child(6) ul#student-details-ul li').text().split(',').indexOf(selection) == -1;
}).hide();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="courses" class="form-control shadow-none decorated">
<option class="text-center">Courses</option>
<option value="Derivative Analysis">Derivative Analysis</option>
<option value="Technical Analysis">Technical Analysis</option>
<option value="Algo Basics">Algo Basics</option>
<option value="Algo Advance">Algo Advance</option>
</select>
<table class="table table-bordered text-center">
<tr class="student-details-thead">
<th>S.no.</th>
<th>Profile</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Courses</th>
<th>Progress</th>
</tr>
<tbody class="student-details-table">
<% courses.forEach(function(course) { %>
<tr>
<td>1</td>
<td>
<% if(course.student_filename) { %>
<img src="../uploads/" <%- course.student_profile %> alt="如何使用js過濾表中ul的li？" width="40px">
<% } else { %>
<img src="../images/profile.png" alt="profile-img" width="40px">
<% } %>
</td>
<td>
<%- course.student_name %>
</td>
<td>
<%- course.email %>
</td>
<td>
<%- course.student_contact %>
</td>
<td>
<ul style="list-style: none;" id="student-details-ul">
<% course.courses.forEach(function(obtainedCourse) { %>
<li id="student-details-limport { originalName as alias } from 'module';">
<%- obtainedCourse.course %>
</li>
<% }) %>
</ul>
</td>
<td>20%</td>
</tr>
<% }) %>
</tbody>
</table>uj5u.com熱心網友回復：
對于“student-details-ul”，您必須使用 class 而不是 id，因為它應該是唯一的，如果有多個具有相同 id 的元素，它將始終采用第一個。所以你必須使用一個類：
<ul style="list-style: none;" class="student-details-ul">
并且您必須更改選擇器以在 js 部分中查詢類，如下所示。（代碼中的“#”已更改為“.”）以查詢類；
dataset.filter(function (index, item) {
return $(item).find('td:nth-child(6) ul.student-details-ul li').text().split(',').indexOf(selection) == -1; }).hide();
});
uj5u.com熱心網友回復：
似乎您只想顯示當前選定的元素。有一個更好的方法：為每個串列項附加一個可選擇的識別符號，就像 id 或 data-id 這些屬性。然后你可以先隱藏所有的串列項，然后通過jQuery選擇器直接找到需要顯示的元素。
對于您的代碼，重復元素不應使用 id 屬性。否則，你可以抓住第一個。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/384848.html
標籤：javascript 数组
上一篇：如何創建/2陣列的方法