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

【问题标题】：jQuery issue, Uncaught TypeError: Cannot read property 'length' of nulljQuery 问题，未捕获的类型错误：无法读取 null 的属性“长度”
【发布时间】：2016-12-01 16:42:45
【问题描述】：

我有这个 jQuery 代码。它从数据库中提取符合舒适标准的列表。但是，它破坏了我页面上的所有其他搜索功能，我不知道为什么。

我在第 185 行得到一个Uncaught TypeError: Cannot read property 'length' of null，也就是这一行...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>

【问题讨论】：

请包含相关的HTML。
@Soviut 我添加了 HTML。
你写道：“我 [...] 试过 if(amenity && amenity.length > 0)。你的意思是 amenityVal？
@user2314737 你住在纽约吗，因为我想请你喝啤酒。我是个白痴，我忽略了 Val。

标签： javascript jquery ruby-on-rails

【解决方案1】：

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

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

【讨论】：

根据有限的信息，这可能是最好的猜测。

【解决方案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;
   });
 }

【讨论】：