範圍到DOM元素

我只是想清理一些jQuery，並不能完全弄清楚調用什麼是將jQuery調用範圍限制到特定的dom元素。舉一個例子，我有以下代碼：範圍到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更漂亮的方法。

來源

2012-10-16 PlankTon

存儲對象中的變量，並發現它緩存的對象

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

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

來源

2012-10-16 19:15:59

只要代碼量是可控的，我平時一起穿插.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()是沒有必要的，但它可能是在未來，如果代碼被修改。比對不起更安全。

來源

2012-10-16 19:15:29 Jon

只是想知道里面。有沒有理由在其他2個答案中使用這種方法？ – Dcullen

@Dcullen：輸入稍微少一些，這是一個偏好的事情。沒有技術原因。 – Jon

@Dcullen有些人更喜歡這種方法，因爲它變成了一個班輪。在現代瀏覽器中，原始代碼可能比使用'.find'更有效率，而不是它們之間的顯着差異。 –

可以緩存對象：

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

來源

2012-10-16 19:15:55 undefined

範圍到DOM元素

回答

相關問題