javascript - 是否可以通过上下文引用文档中的元素？

Question

访问元素的经典方式是:

<div id="myId"></div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#myId').something();
    });
</script>

更不用说很多时候没有明确的 id 用于访问元素，我们最终使用类属性的值，但我们永远无法确定是否有不止一个这样的元素页面。

在将这段或类似的代码写了数千遍之后，我开始怀疑:

有没有办法使用上下文直接引用 HTML 元素？

我在想这样的事情:

<div>
    <script type="text/javascript">
        $(document).ready(function(){
            $.getContext().something(); // accessing the encapsulating div
        });
    </script>
</div>

或者类似的东西？

Answer 1

您可以将可选的第二个上下文参数传递给您的 jQuery(selector, context)其中 context 是:

A DOM Element, Document, or jQuery to use as context

例如，在您的示例中，您可以将 this 传递给您的选择器以引用 document 上下文:

$(document).ready(function(){
    $('#myId', this).something();
});

这个例子是人为设计的，因为 ID 选择器，并且文档是默认上下文。一个更好的例子是这样的:

$('div.foo').click(function() {
    $('span', this).addClass('bar');
});