CODEWITHSUNDEEP
javascriptjquery
Gabsii
Gabsii

Reputation: 456

Access the parent of an element without ID

How do I get the parent of the li with the value WAN without working with IDs? I already tried using $(this).parent().parent(); in an onclick for the input but it only returned the clicked li.

<li>
   <span class="expanded">-</span>
   <input type="checkbox" name="Application Integration">Application Integration
   <ul class="">
      <li>
         <span class="expanded">-</span>
         <input type="checkbox" name="Windows">Windows
         <ul class="">
            <li>
               <span class="expanded">-</span>
               <input type="checkbox" name="Leitungen">Leitungen
               <ul class="">
                  <li><span>&nbsp;</span><input type="checkbox" name="WAN">WAN</li>
                  <li><span>&nbsp;</span><input type="checkbox" name="Mail">Mail</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</li>

How would I access the whole construct (starting at <input type="checkbox" name="Application Integration">Application Integration)?

already a huge thank you for any suggestions.

Upvotes: 0

Views: 38

Answers (3)

caramba
caramba

Reputation: 22480

You after something like this?

$('[name="Application Integration"]').on('click', function(){
   $(this).closest('li').find('[name="WAN"]').closest('li').addClass('xxx');
});
.xxx {
    border: solid 3px orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
   <span class="expanded">-</span>
   <input type="checkbox" name="Application Integration">Application Integration
   <ul class="">
      <li>
         <span class="expanded">-</span>
         <input type="checkbox" name="Windows">Windows
         <ul class="">
            <li>
               <span class="expanded">-</span>
               <input type="checkbox" name="Leitungen">Leitungen
               <ul class="">
                  <li><span>&nbsp;</span><input type="checkbox" name="WAN">WAN</li>
                  <li><span>&nbsp;</span><input type="checkbox" name="Mail">Mail</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</li>

or the other way round

$('[type="checkbox"]').on('click', function(){
   $(this).parents('li').last().children('input').not($(this)).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
   <span class="expanded">-</span>
   <input type="checkbox" name="Application Integration">Application Integration
   <ul class="">
      <li>
         <span class="expanded">-</span>
         <input type="checkbox" name="Windows">Windows
         <ul class="">
            <li>
               <span class="expanded">-</span>
               <input type="checkbox" name="Leitungen">Leitungen
               <ul class="">
                  <li><span>&nbsp;</span><input type="checkbox" name="WAN">WAN</li>
                  <li><span>&nbsp;</span><input type="checkbox" name="Mail">Mail</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</li>

Upvotes: 2

TreyeDesigns
TreyeDesigns

Reputation: 170

Use $(this).parent().closest('li');

If you are specifically targeting an input you can use:

$("input[name='WAN']").click(function(){
    $("input[name]='Application Integration'").addClass("wan-clicked");
});

Upvotes: 1

arbuthnott
arbuthnott

Reputation: 3819

I think you need jquery's .closest method. It lets you rise through the DOM until you meet a certain selector.

$('input[name="WAN"]').click(function(event) {
    var closestli = $(event.target).closest('li');
    var closestul = $(event.target).closest('ul');
    var closestConstruct = $(event.target).closest('input[name="Application Integration"]');
});

Like any jquery selection, you can get an empty object if there is no "ancestor" matching your selector.

Upvotes: 0

Related Questions