Question

我尝试在我的页面上找到第一个输入字段，其中父div具有已定义的类。因此，按照定义的顺序获取输入对我来说很重要。不幸的是，Firefox提供了与Internet Explorer相反的元素。有什么想法来解决这个问题吗？

示例：

<html>
<head>
    <!-- Include jQuery -->
</head>
<body>
    <form>
        <div class="inputContainer">
        </div>
        <div class="inputContainer error">
            <input name="input1"/>
        </div>
        <div class="inputContainer">
            <input name="input2"/>
        </div>
        <div class="inputContainer error">
            <span>
                <input name="input3"/>
            </span>
            <span>
                <input name="input4"/>
            </span>
        </div>
    </form>
    <script>
        var errorContainers = $('input:visible, div.selector').parents('.inputContainer').filter('.error');
        var firstErrorInput = $(errorContainers).find('input,div.selector').first();
        alert($(firstErrorInput).attr('name'));
    </script>
</body>
</html>

Answer 1

您的代码会在Chrome（16），Firefox（6）和IE 8（包括和不包含兼容模式）中提醒“input3”。

用它测试; http://jsfiddle.net/sR97k/

请注意，您将选择器/所选元素多次包裹起来$($($('selector')))，这是不必要的。

var errorContainers = $('input:visible, div.selector').parents('.inputContainer').filter('.error');
var firstErrorInput = $(errorContainers).find('input, div.selector').first();
alert($(firstErrorInput).attr('name'));

这就够了;

var $errorContainers = $('input:visible, div.selector').parents('.inputContainer').filter('.error');
var $firstErrorInput = $errorContainers.find('input, div.selector').first();
alert($firstErrorInput.attr('name'));

以下选择器应该是包含CSS类input和inputContainer的元素中的第一个error;

$(document).ready(function() {
    var x = $('.inputContainer.error input').first().attr('name'); 
});

在尝试读取DOM之前确保已加载DOM。

jQuery find（）IE和FF中的不同顺序

1 个答案: