jQuery - 只有類的元素的原型

Question

嗨，大家好。我想知道這是否是可能的原型只有某些類別，類型，名稱等元素..

例如：

$.fn.showRequiredError = function(){ 
    $(this).after('<p class="error">This field is required</p>'); 
}); 

如果我調用$（「＃XXX」）這一個工程showRequiredError。 （）;

---

現在，我不知道是否有可能「擴展」的jQuery的功能只.required

類的元素，因此例如，它應該是這樣的：

$(".required").fn.showRequiredError = function(){ 
    $(this).after('<p class="error">This field is required</p>'); 
}); 

，我會只能撥打 $（「。required」）。showRequiredError（）;.
如果我調用$（「。somethingElse」）。showRequiredError（）;它什麼都不會做。

希望你能理解。

P.S .:這種方法是否會對性能產生影響？

Answer 1

您可以做到這一點，雖然這似乎有點奇怪，通常是使用誰決定什麼因素將作用於插件程序員。

你會使用filter做到這一點：

$.fn.showRequiredError = function(){ 
    this.filter(".required").after('<p class="error">This field is required</p>'); 
    // ^^^^^^^^^^^^^^^^^^^^--- the new bit 

    // See "side note" below 
    return this; 
}; 

現在，插件做的第一件事是過濾的jQuery的內容對象，它被稱爲上所以他們只包括.required元素。

這將有非常非常小性能的影響，沒有什麼可擔心的。

實施例：

$.fn.showRequiredError = function(){ 
 
    this.filter(".required").after('<p class="error">This field is required</p>'); 
 
    // ^^^^^^^^^^^^^^^^^^^^--- the new bit 
 

 
    // See "side note" below 
 
    return this; 
 
}; 
 

 
$("div").showRequiredError();

.required { 
 
    color: blue; 
 
}

<div class="foo">This doesn't have 'required'</div> 
 
<div class="foo required">This does have 'required'</div> 
 
<div class="required">So does this</div> 
 
<div>But not this</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

邊注1：注意，在呼叫到一個jQuery插件，this是一個jQuery對象，所以寫$(this)是redudant（和運行時額外工作的一小部分）。

---

邊注2：除非你有別的東西，你必須返回，按照慣例jQuery插件應該返回this，用於鏈接。

Answer 2

我不明白在這種情況下使用選擇器。只需添加功能jQuery對象原型：

$.showRequiredError = function(){ 
 
    $(".required").after('<p class="error">This field is required</p>'); 
 
}; 
 

 
$.showRequiredError()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input class="required"> 
 
<input class="not-required">

Answer 3

所有的jQuery對象擁有所有的方法，所以你不能限制什麼可以任意給定的jQuery對象上調用。

但是，您可以在方法內部編寫代碼來決定是否執行任何操作。因此，您可以檢查jQuery對象中的元素是否爲正確的元素類型，如果不是，則不執行任何操作。或者，如果你真的不在你的jQuery對象中的DOM元素上操作，因爲你已經知道它們是什麼，那麼你可能需要一個靜態jQuery方法，如$.showRequiredError。

$.showRequiredError = function(){ 
    $(".required").after('<p class="error">This field is required</p>'); 
}); 

而且，您將其稱爲$.showRquiredError()。