如何加快 jquery :selected 选择器的速度？答案

【问题标题】：How can I speed up jquery :selected selector?如何加快 jquery :selected 选择器的速度？
【发布时间】：2009-02-12 13:35:09
【问题描述】：

我在一个包含 3830 个元素的网页中有一个下拉菜单。我知道，不过分。

在 jquery 中，我使用以下语句获取选定的选项值：

$( "#institutionCombo :selected" ).val();

在找到选择之前有一个明显的停顿。一旦我得到那个值，我就把它插入到页面上的一个文本框中，所以我知道有多快。另外，我已经使用 Firebug 中的断点对其进行了检查。

如果我去老学校并使用这个 javascript：

var div = document.getElementById("maindiv");
var select = div.getElementsByTagName("select")[0];
var ix = select.selectedIndex;
var instId = select.options[ ix ].value;

这个速度是瞬间的。

当数字太高时，jquery 中是否有一些继承会使 :selected 选择器变得如此缓慢？我想在我的脚本中始终使用 jquery，有没有人建议加快在 jquery 中找到选定的选项？

谢谢，

克雷格

【问题讨论】：

啊，废话，已经有五个标签了。我很想给你贴上标签，或者只是 wtf
3830...开个玩笑，怎么会有人滚动那么多...
您无需滚动，您只需开始输入，下拉菜单就会找到最接近的匹配项。它比如果你只有一个列表框那么你必须滚动要容易得多。实际上没有用户抱怨过选择多，因为它易于使用。

标签： jquery performance selector selected selectedindex

【解决方案1】：

获取选择框的val时不需要调用:selected。

默认行为是获取 selectedIndex

$( "#institutionCombo").val();

如评论中所述，如果您需要访问该选项的文本，您可以使用

$( "#institutionCombo option[value=" + $( "#institutionCombo").val(); + "]").text();

尽管如果您知道需要 text 属性并且它与值不同，您可能只想直接使用 selectedIndex。

var combo = $("#institutionCombo").get(0); 
combo = combo ? combo : {selectedIndex: -1}; // handle no combo returned
if (combo.selectedIndex < 0)
  return; // nothing selected
$('#institutionCombo option:eq(' + combo.selectedIndex + ')').text()

这是来自 jquery 源 (v1.3) 的 sn-p

val: function( value ) {
    // ...  
    // We need to handle select boxes special
    if ( jQuery.nodeName( elem, "select" ) ) {
        var index = elem.selectedIndex,
            values = [],
            options = elem.options,
            one = elem.type == "select-one";

        // Nothing was selected
        if ( index < 0 )
            return null;

        // Loop through all the selected options
        for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) {
            var option = options[ i ];

            if ( option.selected ) {
                // Get the specifc value for the option
                value = jQuery(option).val();

                // We don't need an array for one selects
                if ( one )
                    return value;

                // Multi-Selects return an array
                values.push( value );
            }
        }

        return values;  
    // ...  
},

当您调用 :selected 选择器时，该选择器将遍历所有选择元素的后代，寻找要设置的 .selected 属性，并将返回任意数组。无论哪种方式，它都会循环所有后代，所以不要这样做。

【讨论】：

对不起，办公室断电，无法响应。这很好，但听起来如果你想获得选定的文本，你仍然必须恢复像朱利安所说的老派方法。还是有一个我不知道的 jquery 方法也可以做到这一点？
回答了这个问题——使用 var v = $( "#institutionCombo" ).val(); var t = $( "#institutionCombo [value=' + v + ']" ).text();

【解决方案2】：

你可以这样做：

var ix = $("#institutionCombo").attr("selectedIndex");

var value = $( "#institutionCombo option:eq(" + ix +")" ).val();

但是，这实际上是您在老式代码中所做的事情。

我很惊讶有一个明显的延迟，因为我会认为我上面所做的就是 jQuery 代码为 :selected 选择器所做的。

否则，我想知道是否是导致延迟的语法错误，您可能应该这样做

$( "#institutionCombo option:selected" ).val();

（注意选项：selected vs :selected）

【讨论】：