CODEWITHSUNDEEP
javascriptjquerycustom-data-attribute
Solomon Closson
Solomon Closson

Reputation: 6217

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

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?

Upvotes: 0

Views: 2449

Answers (1)

Barmar
Barmar

Reputation: 781721

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

Upvotes: 1

Related Questions