javascript - jquery - 检查之前或之后是否有禁用元素

Question

我有一个 select 字段，其中包含一些禁用的 option 元素。使用 jQuery，我想在选定的 option 之前或之后找到任何禁用的元素。但是，当我从列表的开头或结尾选择 option 时，它们之后或之前没有任何禁用的元素，结果我仍然收到来自脚本应找到两种可能性的条件的消息。

HTML

<select>
  <option selected>-- select hour --</option>
  <option data-hour="1630" value="16:30">16:30</option>
  <option data-hour="1700" value="17:00">17:00</option>
  <option data-hour="1730" value="17:30" disabled>17:30</option>
  <option data-hour="1800" value="18:00" disabled>18:00</option>
  <option data-hour="1830" value="18:30" disabled>18:30</option>
  <option data-hour="1900" value="19:00">19:00</option>
  <option data-hour="1930" value="19:30" disabled>19:30</option>
  <option data-hour="2000" value="20:00" disabled>20:00</option>
  <option data-hour="2030" value="20:30">20:30</option>
  <option data-hour="2100" value="21:00">21:00</option>
</select>

<div id="result"></div>

jQUery

$('select').on('change', function() {

  var t = $(":selected", this);
  var thisSelected = $(":selected", this).data("hour");
  var result = $("#result");

  if ( t.prevUntil('option[disabled]') && !t.nextUntil('option[disabled]') ) {

    result.html(thisSelected + " HAVE PREV - NO NEXT " + t.prevUntil("option[disabled]").data("hour"));

  } else if ( !t.prevUntil('option[disabled]') && t.nextUntil('option[disabled]') ) {

    result.html(thisSelected + " HAVE NEXT - NO PREV " + t.nextUntil("option[disabled]").data("hour"));

  } else if ( t.nextUntil('option[disabled]') && t.prevUntil('option[disabled]') ) {

    result.html(thisSelected + " HAVE BOTH : " + t.prevUntil('option[disabled]').data('hour') + " || " + t.nextUntil('option[disabled]').data('hour') );

  }

});

JsFiddle

https://jsfiddle.net/zbfu1wkh/

Answer 1

• 无需使用nextUntil()或prevUntil()使用 prev() 就足够了和next()并检查 length然后得到 data-hour其中

• 还要获取最后一个[disabled]上一个您可以使用 .prevAll()

$('select').on('change', function() {

  var t = $(":selected", this);
  var thisSelected = $(":selected", this).data("hour");
  var result = $("#result");
  var If_prev = t.prev('option[disabled]'); // previous disabled option
  var If_next = t.next('option[disabled]'); // next disabled option
  if(If_prev.length){ // if there is one disabled prev
    console.log('Prev data-hour '+If_prev.data("hour")); // get data-hour of prev
  }else{ // if there is no direct prev
    if(t.prevAll('option[disabled]').length){ // check for any prev
      console.log('No direct prev but Last disabled prev is '+t.prevAll('option[disabled]').data('hour')); // get the last disabled prev
    }
  }
  if(If_next.length){ // if there is one disabled after
    console.log('Next data-hour '+If_next.data("hour")); // get data-hour of next
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option selected>-- select hour --</option>
  <option data-hour="1630" value="16:30">16:30</option>
  <option data-hour="1700" value="17:00">17:00</option>
  <option data-hour="1730" value="17:30" disabled>17:30</option>
  <option data-hour="1800" value="18:00" disabled>18:00</option>
  <option data-hour="1830" value="18:30" disabled>18:30</option>
  <option data-hour="1900" value="19:00">19:00</option>
  <option data-hour="1930" value="19:30" disabled>19:30</option>
  <option data-hour="2000" value="20:00" disabled>20:00</option>
  <option data-hour="2030" value="20:30">20:30</option>
  <option data-hour="2100" value="21:00">21:00</option>

</select>

<div id="result"></div>