element.prevUntil( "option:contains()" ) 不返回预期结果

Question

假设我无法控制HTML的格式，即：

<select id="foods">
  <option value='0'>Some Vegetables</option>
  <option value='1'>-Carrot</option>
  <option value='2'>Some Fruits</option>
  <option value='3'>-Apple</option>
  <option value='4'>-Orange</option>
  <option value='5' selected='selected'>-Strawberry</option>
<select>

我正在尝试获得草莓的"父母"选项，这将是'一些水果'。我以为我可以用：

做到这一点

var strawberry = $('#foods).find(':selected')
// This gives me strawberry.text() = '-Strawberry', as expected
var parentVal = strawberry.prevUntil("option:not(:contains('-'))").val()

但是，这返回parentVal = 4，与-orange相对应。

var parentVal = strawberry.prevUntil("option:contains('-')").val()

...给我parentText = undefined

var parentVal = strawberry.prevUntil("option:contains('Fruits')").val()

...给我parentVal = 4，与-orange相对应。

var parentVal = strawberry.prevUntil("option:contains('Fruits'))").prev().val()

...给我parentVal = 3，与-apple相对应。

发生了什么事？显然，我误解了.prevUntil()的工作原理，或者至少在<option>元素的上下文中其工作方式。当选择任何水果时，关于发生的事情以及如何返回"一些水果"的任何输入？

Answer 1

使用.prevUntil()

的.prevAll()

var parentVal = strawberry.prevAll("option:contains('Fruits')").val()

演示

var strawberry = $('#foods').find(':selected')
var parentVal = strawberry.prevAll("option:contains('Fruits')").val()
console.log(parentVal)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foods">
  <option value='0'>Some Vegetables</option>
  <option value='1'>-Carrot</option>
  <option value='2'>Some Fruits</option>
  <option value='3'>-Apple</option>
  <option value='4'>-Orange</option>
  <option value='5' selected='selected'>-Strawberry</option>
<select>