如何获得一个具有jquery .data（'index'）的元素？

Question

I am setting an element's data attribute onclick of it to the current index, of the element... for example, take the following html:

<ul>
    <li class="get-me">
        <a href="javascript:void(0);" class="alink">Click Me</a> <input type="text" value="" name="name1" />
    </li>
    <li class="get-me">
        <a href="javascript:void(0);" class="alink">Click Me</a> <input type="text" value="" name="name2" />
    </li>
    <li class="not-me">
        <input type="text" value="A value" name="aName" readonly />
    </li>
    <li class="get-me">
        <a href="javascript:void(0);" class="alink">Click Me</a> <input type="text" value="" name="name3" />
    </li>
</ul>

Now, onclick, of the a.alink links I add data('index') to each input sibling... example:

jQuery(document).ready(function($) {
    $('.alink').on('click', function(event) {
        event.preventDefault();
        var $this = $(this),
            $input = $this.next('input');

        if ($input.length)
        {
            $('.alink').each(function(i, obj) {
                if (obj == $this.eq(0))
                {
                    $(obj).next('input').data('index', i);
                    return false;
                }
            });
        }
    });
});

Now the order of these li's can change, after the links have been clicked on, but the jQuery.data stays the same, so wondering if it's possible to get input element that has .data('index') == 1 somehow, as a jQuery object element (like $(this) )? I know that it's possible if the data attribute existed, but this is not the case as it's being set in code instead. And I'm wondering if this can be selected directly instead of looping through all input elements and checking their .data('index') properties.

EDIT

So I have split this into a function here:

function inputFilter(selector, index)
{
    var obj = null;

    if (selector.trim() !== '')
    {
        obj = $(selector).filter(function() {
            return $(this).data('index') == index;
        });
    }
    return obj;
}

But trying to use it returns all input elements:

var $object = inputFilter('input', 1);

What am I doing wrong?

Answer 1

Use a .filter function that looks for the data you want.

$('input').filter(function() {
    return $(this).data('index') == '1';
});

 function inputFilter(selector, index) { var obj = null; if (selector.trim() !== '') { obj = $(selector).filter(function() { return $(this).data('index') == index; }); } return obj; } $("#input1").data("index", 1); $("#input2").data("index", 3); console.log(inputFilter('input', 1).map(function() { return this.id; }).get()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="input1"> <input id="input2"> <input id="input3">