确定DOM元素的范围

Question

我只是想清理一些jQuery,并且无法弄清楚调用特定dom元素的jQuery调用的调用.举个例子,我有以下代码:

$('#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

只要代码量是可管理的,我通常将所有内容与散布的.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()是没有必要的,但如果代码被修改,它可能在将来.比抱歉更安全.