go back(traverse up) from "this" and find specific element with jQuery

Question

Even with jQuery traversing from a specific point is sometimes a riddle to me.

My HTML Structure looks like this:

<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>

The starting point is the clicked #submit.

The Endpoint should be #player.

What have I tried so far in many different variations:

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

Спасибо за любую помощь!

Answer 1

Я думаю, что OP случайно использовал.parent() вместо.parents()

.parent():  traverses to the immediate parent of 

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

Так что я думаю, что было после ОП:

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

Если это не упражнение по обходу DOM, я не уверен, почему вы хотите это сделать?:)

Answer 2

Вы можете использовать (в моей демонстрации я использовал '#submit', но вы можете использовать это):

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

игрок - следующий родной брат inchuter 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

Вернитесь к родительскому div с классом inputer, используя $(this).parents('.inputer'), а затем найдите .player рядом с этим div, так что вы можете использовать $(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>