DOM元素的作用域

Question

我只是在试着清理一些jQuery，但我不太清楚如何将jQuery调用的范围限定为特定的dom元素。举个例子，我有以下代码：

$('#outer-element .first-class').html('wanna');
$('#outer-element .second-class').html('scope');
$('#outer-element .third-class').html('better');

我猜将这些第一类/第二类/第三类调用中的每一个调用调用到一个常见的外部元素调用是一种更优雅的方法，我只是不确定这样做的语法是什么。我猜大概是这样的

$('#outer-element').SOMETHINGGOESHERE(function() {
  $(this).find('.first-class').html('wanna');
  $(this).find('.second-class').html('scope');
  $(this).find('.third-class').html('better');
});

有什么想法吗？还有什么比我上面的建议更优雅的吗？简而言之，我知道上面的内容很丑陋。我正在寻找一种更漂亮的方法来实现这样的JavaScript。

Answer 1

将对象存储在变量中，并在缓存的对象中找到它

var $this = $('#outer-element');

  $this.find('.first-class').html('wanna');
  $this.find('.second-class').html('scope');
  $this.find('.third-class').html('better');

Answer 2

只要代码量是可管理的，我通常会使用散布的.end()调用将所有内容链接在一起：

$('#outer-element')
    .find('.first-class').html('wanna').end()
    .find('.second-class').html('scope').end()
    .find('.third-class').html('better').end();

如果您这样做，您必须非常小心，为每个遍历操作包含一个.end()；因此，超越职责，以一种让人想起Python的方式使用空格可能是一个好主意：

$('#outer-element')
    .find('.first-class')
        .html('wanna')
    .end()
    .find('.second-class')
        .html('scope')
    .end()
    .find('.third-class')
        .html('better')
    .end();

最后一个.end()不是必需的，但如果代码被修改，它可能是将来的。安全总比后悔好。

Answer 3

您可以缓存该对象：

var $outer = $('#outer-element');
$outer.find('.first-class').html('wanna');
$outer.find('.second-class').html('scope');
$outer.find('.third-class').html('better');