remonter (parcourir) à partir de "this" et trouver un élément spécifique avec jQuery

Question

Même avec jQuery traversant à partir d'un point spécifique est parfois une énigme pour moi.

Ma structure HTML ressemble à ceci:

<div class="grid__area grid__area--empty"> 
    <div id="streamcontainer" class="streamcontainer"> 
     <div class="inputer"> 
      <form action=""> 
       <input type="text" name="purl" value="XXX" id="" class=""> 
       <input type="submit" value="Submit" id="submit" class="submiturl"> //starting "this" point 
      </form> 
     </div> 
     <div id="player" class="player"></div> // The Endpoint 
    </div> 
</div> 

Le point de départ est le cliqué #submit.

Le point d'extrémité doit être #player.

Qu'ai-je essayé jusqu'à présent dans de nombreuses variantes différentes:

$(this).find('.player').attr('id'); 
$(this).parent('.streamcontainer').find('.player').attr('id'); 
$(this).parent('.streamcontainer').closest('.player').attr('id'); 

Merci pour toute aide!

Answer 1

Je pense que l'OP a été accidentellement en utilisant .parent() au lieu de .parents()

.parent(): traverses to the immediate parent of 

.parents(): allows us to search through the ancestors of these elements in the DOM tree 

Je pense donc que l'OP était après était à l'origine:

$(this).parents('.streamcontainer').find('.player').attr('id'); 

moins que ce soit un exercice DOM traversal Je ne sais pas pourquoi tu voudrais faire ça? :)

Answer 2

Vous pouvez utiliser (dans ma démonstration, j'utilise '#submit', mais vous pouvez l'utiliser):

$('#submit').closest('.inputer').next(); 

joueur est le prochain frère du inputer anchestor.

var ele = $('#submit').closest('.inputer').next(); 
 

 
console.log(ele.attr('id'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="grid__area grid__area--empty"> 
 
    <div id="streamcontainer" class="streamcontainer"> 
 
     <div class="inputer"> 
 
      <form action=""> 
 
       <input type="text" name="purl" value="XXX" id="" class=""> 
 
       <input type="submit" value="Submit" id="submit" class="submiturl"> //starting "this" point 
 
      </form> 
 
     </div> 
 
     <div id="player" class="player"></div> // The Endpoint 
 
    </div> 
 
</div>

Answer 3

traverse Retour à la div parent avec classe inputer en utilisant $ (this) .parents ('de inputer.'), Puis trouver .player à côté de cette div, si vous pouvez utiliser $(this).parents('.inputer').next('.player').attr('id')

console.log($("#submit").parents('.inputer').next('.player').attr('id'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="grid__area grid__area--empty"> 
 
<div id="streamcontainer" class="streamcontainer"> 
 
    <div class="inputer"> 
 
     <form action=""> 
 
      <input type="text" name="purl" value="XXX" id="" class=""> 
 
      <input type="submit" value="Submit" id="submit" class="submiturl"> //starting "this" point 
 
     </form> 
 
    </div> 
 
    <div id="player" class="player"></div> // The Endpoint 
 
</div> 
 
</div>