Question

我正在尝试选择包含特定文字的下一个<option>。

以下是我的情景：

<select id="stock">
    <option>Blue</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
    <option>Black</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
    <option>Red</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
</select>

我可以通过以下方式轻松找到颜色：

$('#stock').find('option:contains('Black')').attr('selected','selected');

但是我想选择直接在该颜色之后的尺寸。我试过像这样使用next（）：

$('#stock').find('option:contains('Black')').next('option:contains('Medium')').attr('selected','selected');

但显然，next（）只会在之后立即选择元素。所以，我尝试了nextAll（），但它选择了Black之后的两个Medium。所以，我接着尝试在nextAll之后使用first（），但这也不起作用。没有选择。

$('#stock').find('option:contains('Black')').nextAll('option:contains('Medium')').first().attr('selected','selected');

我错过了一些明显的东西吗？谢谢你的帮助！

更新我现在正在使用：将第一个选择器添加到nextAll（）。感谢您的评论。

$('#stock').find("option:contains('Black')").nextAll("option:contains('Medium'):first").attr('selected','selected');

Answer 1

您希望将option groups用于您的选择，因为它们是针对此类选择而制作的，并且可以帮助您使用Javascript选择正确的元素。

然后，您可以使用以下jQuery

$('#stock').find('optgroup[label="Black"]').find('option:contains("Medium")').attr('selected', 'selected')

或者看到这个http://jsfiddle.net/HYydJ/

Answer 2

jQuery.fn.next（）仅选择NEXT兄弟。如果你提供一个选择器，它只会选择匹配选择器的下一个兄弟（而不是匹配的第一个兄弟）。当您开始考虑包含多个匹配的集合时（例如，如果您执行了$('p').next('a') - a之后的所有p标记），这会更有意义

jQuery.fn.first（）只返回现有集合中的第一项（它不是过滤器）。

一个简单的答案，如果您不想使用选择组作为vindia建议（可能是最佳答案），那么将执行以下操作：

function findNextSize($node, size) {
   var $next = $node.next();
   while( $next.length ) {
      if( $next.html().substr(1) === size ) {
          return $next;
      }
   }
   return null;
}

findNextSize( $('#stock').find('option:contains('Black')'), 'Medium' );

Answer 3

这很难看，但它会在它之后直接选择黑色选项和中等选项 -

$('#stock').find("option:contains('Black')").attr('selected','selected').nextAll("option:contains('Medium')").first().attr('selected','selected');

演示 - http://jsfiddle.net/NBhm7/

如何选择包含特定文本的下一个元素？

3 个答案: