Question

jQuery 问题，未捕获的类型错误：无法读取 null 的属性“length”

2016-11-02

857

javascript jquery ruby-on-rails

我有这个 jQuery 代码。它从数据库中提取符合便利条件的列表。但是，它破坏了我页面上的所有其他搜索功能，我不确定为什么。

我在第 185 行收到 Uncaught TypeError：无法读取 null 的属性“length” ，即此行... if (amenityVal.length > 0) { 。我在 SO 上寻找答案并尝试了 if(amenity && amenity.length > 0) 和 if(amenity != null && amenity.length > 0 以及 if(amenity != null && != undefined && amenity.length > 0 。

当我执行其中任何一项时，其他搜索功能均可用，但便利设施搜索不再有效。不知道接下来该怎么做。下面是 jQuery。

// amenity
function filter() {
   var rows = $("tr.matrix-listing");
   rows.hide();

   var amenityVal = $("#select-amenities").val();
   if (amenityVal.length > 0) {
      var amenity = amenityVal;
      rows = rows.filter(function(i, v) {
         var rowAmenities = $(this).data("amenities").split(/\n/);
         return $(rowAmenities).filter(function(_, element) {
           return $.inArray(element.trim(), amenity) > -1;
         }).length === amenity.length;
       });
     }

 rows.show();
}

HTML：

<div class="col-sm-2">
    <!-- Amenities -->
    <select multiple id="select-amenities" class="input-tags matrix-listing-filter" placeholder="Amenity">
      <option value=""></option>
      <option value="Central A/C">Central A/C</option>
      <option value="Doorman">Doorman</option>
      <option value="Duplex">Duplex</option>
      <option value="Elevator">Elevator</option>
      <option value="Laundry in building">Laundry in building</option>
      <option value="Dishwasher">Dishwasher</option>
      <option value="Common courtyard">Common courtyard</option>
      <option value="Private backyard">Private backyard</option>
      <option value="Shared backyard">Shared backyard</option>
      <option value="Balcony">Balcony</option>
      <option value="Terrace">Terrace</option>
      <option value="Patio">Patio</option>
      <option value="Roof access">Roof access</option>
      <option value="Private roof deck">Private roof deck</option>
      <option value="Storage space">Storage space</option>
      <option value="Bike storage">Bike storage</option>
      <option value="Gym">Gym</option>
      <option value="Private parking">Private parking</option>
      <option value="Washer dryer installed">Washer dryer installed</option>
      <option value="Washer dryer hookup">Washer dryer hookup</option>
      <option value="Wheelchair Accessible">Wheelchair Accessible</option>
    </select>
  </div>

Answer 1

不得不猜测，因为问题中没有提供 HTML，但我认为运行此脚本时 DOM 尚未准备好。请确保将代码包装在“ready”回调中。这将等到 DOM 完全加载并且您的 #select-amenities 元素存在后再运行。

$(function() {
    // your code here...
});

Answer 2

尝试选项时，我错过了 Val，只剩下便利设施。想知道为什么它不起作用。SMH。以下是解决方案。

// amenity
var amenityVal = $("#select-amenities").val();
if (amenityVal != null && amenityVal != undefined && amenityVal.length > 0) {
   var amenity = amenityVal;
   rows = rows.filter(function(i, v) {
      var rowAmenities = $(this).data("amenities").split(/\n/);
      return $(rowAmenities).filter(function(_, element) {
         return $.inArray(element.trim(), amenity) > -1;
      }).length === amenity.length;
   });
 }