javascript - 如何获取应用了 jquery .data ('index' )的元素？

Question

我正在将元素的数据属性 onclick 设置为该元素的当前索引...例如，采用以下 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>

现在，在 a.alink 链接中，我将 data('index') 添加到每个输入同级...示例:

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;
                }
            });
        }
    });
});

现在，在单击链接后，这些 li 的顺序可以更改，但 jQuery.data 保持不变，所以想知道是否可以获取具有 的输入元素.data('index') == 1 不知何故，作为 jQuery 对象元素(如 $(this))？我知道如果数据属性存在，这是可能的，但事实并非如此，因为它是在代码中设置的。我想知道是否可以直接选择它，而不是循环遍历所有 input 元素并检查它们的 .data('index') 属性。

编辑

所以我在这里将其拆分为一个函数:

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

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

但是尝试使用它会返回所有输入元素:

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

我做错了什么？

Answer 1

使用 .filter 函数查找所需的数据。

$('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">