檢查td是否包含文本？

Question

我正在研究一個小項目，並且我需要隱藏錶行的功能，如果它們的td.icaoIata不包含正在輸入欄中輸入的字符串。 最重要的是，如果它們的data-屬性位於Jquery滑塊範圍內，它們將被隱藏/顯示。我工作的那部分，不應該是相關的。

基本上，如果找不到字符串，請隱藏該行。然後，一旦輸入框被更新，再次檢查，並隱藏/顯示，如果仍然沒有找到/發現。

我的煩惱主要是結合不同的功能，如find（），：contains等我無法一起工作。

我希望我很清楚。

任何人都可以指導我解決問題嗎？

這是我的代碼。 非常感謝！

<input type="text" name="search" class="form-control searchinput" ><br> 
<div id="slider"></div> 
<div id="slider-value-lower"></div> 
<div id="slider-value-upper"></div> 
    <table class="table table-striped table-bordered"> 
     <thead> 
      <tr> 
       <th>Flight #</th> 
       <th>Departure</th> 
       <th>Arrival</th> 
       <th>Duration</th> 
       <th>Aircraft</th> 
       <th>Distance</th> 
       <th>Options</th> 
      </tr> 
     </thead> 
     <tbody class="schedules"> 
      <tr class="schedulerow" data-duration="1.4"> 
       <td><a href="">DLH1058</a></td> 
       <td class="icaoIata">Frankfurt Main <small>(EDDF)</small></td> 
       <td class="icaoIata">Cote D'Azur <small>(LFMN)</small></td> 
       <td> 1.4 h</td> 
       <td class="icaoIata"> 
        A320 
       </td> 
       <td>386 nm</td> 
       <td> 
        <a href="" class="btn btn-success">Book</a> 
       </td> 
      </tr> 
      ............ 

     </tbody> 
    </table> 

而我的JS

var slider = document.getElementById('slider'); 

noUiSlider.create(slider, { 

    connect: true, 
    start: [0,3], 
    step: 0.5, 
    tooltips: true, 
    range: { 
     'min': 0, 
     'max': 20 
    } 
}); 
//initialize the values 
$(".schedules").children().hide().filter(function() { 
    var duration = $(this).data('duration'); 
    return duration >= 0 && duration <= 3; 
}).addClass('is-shown').show(); 

$(".searchinput").keyup(function() { 
    var content = $(".searchinput").val(); 
    //My mess was here.... 
}); 

slider.noUiSlider.on('change', function(values, handle) { 

    /*sliderValues[handle].innerHTML = values[handle];*/ 
    filterRows(values[0], values[1]); 
}); 

function filterRows(min, max) { 
    $(".schedules").children().removeClass('is-shown').hide().filter(function() { 
     var duration = $(this).data('duration'); 
     return duration >= min && duration <= max; 
    }).addClass('is-shown').show(); 
} 

所以，

Answer 1

既然你已經應用可以從多個源（滑塊和輸入框）中設置的過濾器，我會保持在過濾器設置保存（也有用幹設置一個單獨的對象值）

例如

var filter ={ 
    min: 0, 
    max: 3, 
    text : '' 
}; 

其中min和max是持續時間，text是搜索文本。

的filterRows方法可以使用過濾器對象和不需要的參數：

function filterRows() { 
    $(".schedules").children().removeClass('is-shown').hide().filter(function() { 
     var duration = $(this).data('duration'); 
     return duration >= filter.min && duration <= filter.max 
      && (!filter.text || $(this).children('td.icaoIata').filter(function(){return $(this).text().toLowerCase().indexOf(filter.text) !== -1;}).length); 
    }).addClass('is-shown').show(); 
} 

滑塊和輸入應設置適當的過濾器值，並調用filterRows方法。

例fiddle

Answer 2

使用.filter()爲。

var content = $(".searchinput").val(); 

$('.schedules tr') 
    .show() // first show all tr 
    .filter(function() { 
     // return only tr that does not contain "content" value 
     var match = false; 

     $(this).find('.icaoIata').each(function() { 
      if ($(this).text().toLowerCase().indexOf(content) == -1) { 
       match = true; 
      } 
     }); 

     return match; 
    }) 
    .hide();