CODEWITHSUNDEEP
jqueryevents
Sachin Verma
Sachin Verma

Reputation: 3812

get relative element jQuery

I want to access an element from DOM whose parent is child of parent of parent of my current element.Messed?
Look here:

<div class="tr2">
    <div class="td1">
        <input type="checkbox" value="" name="" />
    </div>
    <div class="td2">${index.getKey()[1]}
        <input type="hidden" name="upc" value="${index.getKey()[0]}" id="upc${index.getKey()[0]}" />
    </div>//i want to access this hidden input
    <div class="td3">
        <input type="text" name="categoryInput${counter+1 }" value="${index.getValue().toString().replace('[','').replace(']','');}" class="input" id="ct-input${counter+1 }" placeholder="Select your Category" />
    </div>//from event of this textfield
    <div class="td4"><i class="fa fa-check"></i>
    </div>
</div>

I want to access hidden input in td2 from event of text input in td3.
NOTE: All of this is in a loop so don't suggest any absolute element path.
May be i messed up my question feel free to edit or suggest.
Thanks in advance

Upvotes: 0

Views: 157

Answers (7)

Hensembryan
Hensembryan

Reputation: 1087

Update:

you can use closest solution or add additional attribute on your textbox element for example (hidden-target-id is the id of your hidden input):

<input hidden-target-id="upc${index.getKey()[0]}" type="text" name="categoryInput${counter+1 }" value="${index.getValue().toString().replace('[','').replace(']','');}" class="input" id="ct-input${counter+1 }" placeholder="Select your Category" />

-

$('input[type=text]').on('change', function() {
    var yourHiddenInput = $("#" + $(this).attr('hidden-target-id'));
});

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10906

try something like this.

            $('.td3 input').change(function(){
                  $(this).parent().prev().find('input:hidden')//will give you hidden element
            });

Upvotes: 0

amosmos
amosmos

Reputation: 1049

$(this).parent().prev().children('input[type=hidden]')

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Use .closest()

$('.td3 input').change(function(){
    $(this).closest('.tr2').find('input:hidden');
});

References

.find()

:hidden

Upvotes: 1

schnawel007
schnawel007

Reputation: 4020

$('.tr2 .td2 input')

this selector should help you

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

I think the solution is to find the closest tr2 element and then find the .td2 input element in it

$(this).closest('.tr2').find('.td2 input')

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10388

$(".tr2").on("click","td3.input[type='text']",function(){

$(this).closest(".tr2").find(".td2 input:hidden");//here you get hidden input
});

use closest() and :hidden

Upvotes: 0

Related Questions