如何使用 jQuery 在 HTML 選擇中突出顯示某些選項

Question

我有一個對 HTML 選擇列表的 jQuery 引用。 我需要迭代選項並檢查選項的文本是否與 RegEx 匹配，如果我想向選項添加 CSS 類。 我該怎么做呢？

var ddl = $($get('<%= someddl.ClientID %>'));

我能以某種方式利用 .each() 函數嗎？

例子

<select id="someddl">
    <option value="21">[21] SomeData ***DATA***</option>
    <option value="22">[22] SomeData ***DATA***</option>
    <option value="23">[23] SomeData </option>
    <option value="24">[24] SomeData </option>
    <option value="25">[25] SomeData ***DATA***</option>
</select>

我想將 CSS 類添加到此示例中的項目 1、2、5。 在 C# 中，我的 RegEx 是Regex expression = new Regex(@"\*\*\*"); 但我現在想通過 JavaScript 執行此操作，因此正則表達式看起來可能會有些不同。

有什么想法可以在這里完成要求嗎？

謝謝，~ck

Answer 1

好吧，你當然可以利用 $.each()，就像這樣：

$("#someddl option").each(function(i){
    var val = $(this).html();

    if(// regex)
    {
        $(this).addClass("myclass");
    }
});

你必須自己做正則表達式，因為它非常痛苦：P

Answer 2

正如我在回答您的 C# 問題時所寫，如果您想匹配 3 個星號，則不需要正則表達式。 嘗試以下：

$(document).ready(
function()
{
    $('#someddl option:contains("***")').addClass('selected');
}
);

Answer 3

這樣的事情應該有效：

$('select[id=whatever] option').each(function() { 
  if (... your condition ...) {
    $(this).addclass('cssClass');
  }
});

Answer 4

我會這樣做

$(function()
{
  $("#someddl option").each(function(i,elem)
  {
    if( /\*{3}/.test( elem.text) )
    {
        $(elem).addClass("myclass");
    }
  });
} );

只知道實際上可以應用於<option>元素的 CSS 子集非常有限

Answer 5

你要找的是：

re = /[\*]{3}[^\*]{1,}[\*]{3}/

/[\*]{3}/ // match 3 *
/[^\*]{1,}/ // match atleast 1 non *

Answer 6

如果您有正則表達式，則有一篇文章解釋了如何擴展 jquery 以使用正則表達式。

http://blog.mastykarz.nl/jquery-regex-filter/

jQuery.extend(
    jQuery.expr[':'], {
        regex: function(a, i, m, r) {
            var r = new RegExp(m[3], 'i');
            return r.test(jQuery(a).text());
        }
    }
);

這將允許您在選擇器中直接使用正則表達式，而不是循環遍歷所選結果並匹配正則表達式。