使用 jQuery 显示匹配数据 ID 的 h5 标签

Question

我有一个班级的多个数据ID。我需要选择一个 ID 与父 ID 匹配的特定 h5。

我要找的只是选择一个数据 ID 与父 ID 匹配的特定 h5 标签 (

var ParentID = $('#ddlSearch option:selected').val();

) 然后我可以从那里遍历层次结构。

$("#btn-search").click(function() {

  var ParentID = $('#ddlSearch option:selected').val();
  var selectedlastChild = $('.to-list).attr("data-id");  
  $('.list-container').each(function() {

    var delimiter = 'Id-';
    var ids = this.id.split(delimiter)[1];
    if (ParentID(399) === ids(399)) {
      if(selectedlastChild(399) ==ParentID(399))
     {
       show only <h5 class="to-list primary  data-id="399"> for example 
     and hide the rest
    }


  });



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h5 class="to-list primary  data-id="399">
    
<h5 class="to-list primary  data-id="392">
    
<h5 class="to-list primary  data-id="402">

Answer 1

一旦你有了

parentId

，你可以使用像

[data-id="${parentId}"]

这样的选择器来选择你想要改变的

<h5>

。如果显示/隐藏是您的目标，您可以使用 jQuery 的 toggle 方法和一个使用选择器的谓词来确定是显示还是隐藏每个元素。

$("#btn-search").click(function() {   
  const parentId = $('#ddlSearch option:selected').val();
    
  $('[data-id]').each(function () {
    $(this).toggle($(this).is(`[data-id="${parentId}"]`));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5 class="to-list primary" data-id="399">One</h5>
<h5 class="to-list primary" data-id="392">Two</h5>
<h5 class="to-list primary" data-id="402">Three</h5>

<select id="ddlSearch">
  <option value="399">399</option>
  <option value="392">392</option>
  <option value="402">402</option>
</select>

<button id="btn-search" type="button">Search</button>