Referring to a specific DOM element of the tree [jQuery]

Question

We have:

<html> <body> <div> <form> <ul> <li> <label>Simple text 1</label> <input type="text" name="inp1" value="Text 1"> </li> <li> <label>Simple text 2</label> <input type="text" name="inp2" value="Text 2"> </li> <li> <label>Simple text 3</label> <input type="text" name="inp3" value="Text 3"> </li> <ul> <input class="getInfoButton" type="button" value="Get Value"> </form> </div> </body> </html>

Salt: We need to get the value of the third <input> , having such a selector $(".getInfoButton")

It is necessary to solve this problem optimally, tobish if I later want to move the third <input> to a few <li> below in the DOM tree (adding more points between the third and second <li> )

PS If this is impossible to solve, then as I understand you need to write your function

$('.getInfoButton').prev().children('input[type=text]').eq(3);
"... if I later want to move the third <input> ... in the DOM tree" - should I always refer to the third one or specifically, independently, what will it be like in the future?
@lexxl And we do not know) he can be the 7th and maybe the 27th
@MaximPro, Appeal to a specific element , and how to determine which element is needed and did not write, then the third, then the seventh
@MaximPro I ask what needs to be found - the third element in the future, or the one that is the third one now =) it depends on this, to which it should be attached - to an ordinal number or name / class / idi

Accepted Answer · 2015-12-14T18:51:04

Choose by identifier: $('#id3') (but you will need to add this identifier to the corresponding <input id="id3"> ), or simply select by the name $('[name="inp3"]') .

Well, or in your problem:

$('.getInfoButton').prev().find('[name="inp3"]')

But I do not understand why to make a start from this selector, but your business.

@MaximPro, I still do not understand, you can click on this element, and get data from any others.
@MaximPro, something changed in the code, this one should work exactly.
I didn’t hear about find))) I apparently was looking for this) And about children() , in my code we cannot write $('.getInfoButton').prev().children('input[name=inp3]') because it works for one nesting, and not for several, right ?!

cyadvert cyadvert 6,724 one 12 31 · Answer 2 · 2015-12-14T19:03:38

Here's what will help you:

 $('.getInfoButton').prev().find('input[type=text]').eq(2);

More details:

$('.getInfoButton') - the element itself
.prev() -> step up the DOM
.find('input[type=text]') -> select input[text]
.eq(2) -> take the 3rd element

Good answer, for beginners with a description of the methods
if several elements with the class .getInfoButton on the page
@MaximPro, from where it will take $(this) if in this context it is not indicated anywhere about the event handler, in principle this is indicated only in the answer @mix

mix mix 2,487 one 6 18 · Answer 3 · 2015-12-14T19:05:32

 $(".getInfoButton").click(function(){ var selector = $('input[type="text"]')[2]; console.log($(this).parent().parent().find(selector).val()); });

Here is the solution to the problem according to your requirements, but this is called nothing but “govnokod”. Set tags or classes with tags better and choose based on them.

they overlooked something: they found a specific element, selector - why can't we take value from it right away?
Yes, and two parents - not necessary, the first will indicate the form and that is enough
I wanted to write how you do not need a code with a signature

Referring to a specific DOM element of the tree [jQuery]

3 answers 3

More articles: