jquery单击最高父输入的子项

Question

I am trying to click the first input checkbox when I click the second one.

<li>
  <div>
     <input type='checkbox' value='x'/>
  </div>

  <ul>
     <li>
        <ul>
             <li>
                 <div>
                     <input type='checkbox' id='check' value='b'/>
                  </div>
              </li>

        </ul>

     </li>

  </ul>
</li>

doing this does not help:

$('#check').click(function(){
  $('this').parents('li #parent').children('div').find('input').click();
});

what am I missing here?

Answer 1

$('#check').click(function(){
  $('#parent').find('input').first().click();
});

if you use parent as class

<li class='parent'>

Then you can do this -

$('#check').click(function(){
  $(this).closest('.parent').find('input').first().click();
});

Answer 2

Since id is unique there is no need to look for any parents, you can directly use the id

$('#check').click(function(){
    $(this).closest('li[id]').find('input').first().click();
});

Answer 3

Give the first checkbox its own ID. Then you can use

$('#firstcheck').prop('checked',true);

Answer 4

I'd suggest, given that the id is dynamically generated:

$('#check').click(function(){
    $(this).closest('div[id]').find('input').first().click();
});

If, as you note in comments to other answers, the id for #check is also dynamic I'd strongly suggest adding a consistent class-name to the input -element in order to bind the click() event-handler. Otherwise you'll end up having to check the 'depth', or the number of ancestors, in order to decide which should be clicked, and which should trigger the click event-handler.

Answer 5

This will work without an ID, but as David Thomas mentioned, it's more efficient to use an ID.

$('#check').click(function(){
    $(this).parents('li').last().find('div:first input').click();
});