从 "this" 返回（向上遍历）并使用 jQuery 找到特定元素

Question

即使 jQuery 从特定点遍历有时对我来说也是一个谜。

我的 HTML 结构如下所示：

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

起点是被点击的#submit.

端点应该是#player.

到目前为止我在许多不同的变体中尝试了什么：

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

感谢您的帮助！

Answer 1

您可以使用（在我的演示中我使用了“#submit”，但您可以使用这个）：

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

player 是 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 2

使用 $(this).parents('.inputer') 使用 class 输入器返回父级 div，然后在 [=23= 旁边找到 .player ]，所以你可以使用 $(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>

Answer 3

我认为 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

所以我认为 OP 最初的目的是：

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

除非这是 DOM 遍历中的练习我不确定您为什么要这样做？ :)

从 "this" 返回（向上遍历）并使用 jQuery 找到特定元素

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

javascript

jquery

traversal

dom-traversal