Home/ Questions/Q 7005093
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:18:29+00:00

I try to find the first input fields on my page which have a

  • 0

I try to find the first input fields on my page which have a parent div with a defined class. So to get the inputs in the order they are defined is important for me. Unfortunately Firefox gives me the elements in the inverse order than the Internet Explorer. Any ideas to fix that?

Example:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code alerts “input3” in Chrome(16), Firefox (6) and IE 8 (with and without compability mode).

    Tested it with; http://jsfiddle.net/sR97k/

    Notice that you´re wrapping your selector/selected elements multiple times like $($($('selector'))) and this isn´t necessary.

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

    This would be enough;

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

    The following selector should be get the first input in an element with the CSS classes inputContainer and error;

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

    Making sure the DOM has loaded before attempting to read from it.

    • 0