using jQuery to traverse the DOM

Question

Given the following html DOM:

<div>
    <div>
        <input data-id="somevalue">
    </div>
    <div>
        <a href="">edit</a>
    </div>
</div>

When the edit is clicked, I'd like to get the somevalue.

A) Would I use .parent().parent().find() or is there a more appropriate solution?
B) How would I get the value for the data-select? I know how to get it by ID or class but not clear on the syntax to use for data attributes.

Using the following:

var id = $(this).parent().parent().find().attr('id');
console.log(id);

outputs undefined so I'm not sure if I have a traversing issue or if I don't have the syntax correct for getting the data attribute value.

Answer 1

You can use

$(this).parent().prev().children().data('id')

:

$('a').click(function(e) {
  e.preventDefault();
  console.log(
    $(this).parent().prev().children().data('id')
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <input data-id="somevalue">
    </div>
    <div>
        <a href="">edit</a>
    </div>
</div>

Your .find(), with no arguments, isn't giving you any results because you didn't pass it any selector to find. Also, the attribute isn't id - the attribute is data-id, so you should use data('id') rather than attr('id').