如何获取应用了 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;
}

但尝试使用它returns所有输入元素：

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

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

How to get an element that has a jquery .data('index') applied to it?

javascript

jquery

custom-data-attribute