2011-06-08 96 views
8

jQuery是否有一個方法來確定傳遞給函數的參數是否是一個選擇器?確定一個字符串是否是有效的jQuery選擇器?

我正在製作一些jQuery插件的模板,我需要能夠檢查傳入的參數是否是jQuery選擇器。我想允許其他數據類型,並根據傳遞的數據類型執行不同的方法。檢測數據類型很容易,但選擇器只是一個字符串,可以用許多不同的方法來構建。

我的目標是創建一個插件,它可以寬恕您傳遞的參數,並就如何處理這些參數做出明智的決定。例如,在一些插件中,例如,在一些插件中,可以說我們在參數佔位符中傳遞了一個回調函數,該函數用於速度的數字,但它仍然需要回調並運行它並使用默認速度。這就是我要做的功能,選擇器是一個非常獨特的例子。

jQuery爲此寫了一個正則表達式嗎?我在代碼中找不到一個。

如果不是,我想我只需要爲此寫一個巨大的正則表達式?

+0

爲什麼不傳遞實際的jQuery對象? '$('selector')'應該很容易檢查... – 2011-06-08 18:18:21

+0

@jcinacio:謝謝,但我實際上也在檢查。我的目標是創建一個非常隨意的參數。 – UpHelix 2011-06-08 18:25:02

+0

'$('selector')'不適合這個目的,因爲如果它無效,就會拋出一個錯誤。 – 2013-06-02 20:29:59

回答

4

許多字符串可以技術上$('blah')選擇可以選擇自定義元素!沒有什麼好的方法可以知道如何處理傳遞給你函數的參數,所以最好有一個像Gaby所說的定義良好的結構。

選擇:

yourFunction({ selector: 'div' }); 

或者

yourFunction({ value: 'testing' }); 

將會在您的代碼不同的路線。

沒有這個技巧,你可以做的最好的就是嘗試讓jQuery根據選擇器查找元素,檢查.length,如果找到元素,則假定調用者使用jQuery選擇器。另一種選擇可能只是爲了記錄一個jQuery對象必須被傳遞即:

yourFunction({ value: jQuery('div') }); 

那麼對於不同的路線,你可以做

if (value instanceof of jQuery) { .... } 
+0

「嘗試讓jQuery根據選擇器查找元素,使用.length檢查,如果找到元素,則假定調用者使用jQuery選擇器」----這非常好。 – UpHelix 2011-06-08 18:30:06

+0

@UpHelix沒有要求檢查一個選擇器是否匹配某個東西,或者它選擇了什麼樣的角色,但是如果它根據選擇器語法的jQuery規則是有效的。 – 2013-06-02 20:31:09

+2

@UpHelix「嘗試讓jQuery根據選擇器查找元素,使用.length檢查,如果找到元素,則假定調用者使用jQuery選擇器」 - 糟糕的主意,有些字符串在用作jQuery選擇器時會拋出異常,只是嘗試用「(」 – Rui 2013-11-11 11:46:04

4

不可能有這個正則表達式,因爲選擇是可擴展的,任何人都可以加入的個人選擇(與自定義的符號等)...

任意數量也許你應該嘗試傳球您的參數作爲具有命名參數的單個對象。

{ selector:'...', 
    otherargument:'somevalue', 
    afunction: function(){...} 
} 
4

確定選擇的jQuery代碼是有效的大約108線長,所以不要指望,以確定它是否在一個正則表達式語句是一個有效的選擇與否。

最好的辦法是看看jQuery確定是一個有效的選擇器,並創建一個基本上以相同方式檢查的函數,但返回它是否有效。

https://github.com/jquery/jquery/blob/master/src/core.js#L80-188

0

這不回答你的問題,但我認爲它可能是有幫助的。它不檢查一個參數是否是一個jQuery選擇器,但它檢測選擇器是否存在於文檔中。

$.fn.inDom = function() { return $(document).find(this).length; }; 

BTW:我不直接使用$(selector).length,因爲它會返回1如果傳遞的參數是一個HTMLNode

爲了更好的詮釋目的:

$('foo').length // 0 
$('.foo').length // 0 
$('#foo').length // 0 
$('<foo>').length // 1 
$(document).find('foo').length // 0 
$(document).find('.foo').length // 0 
$(document).find('#foo').length // 0 
$(document).find('<foo>').length // 0 
+0

確實有幫助:)我只想補充說,如果輸入字符串不是選擇器,它會引發錯誤。爲了贏得挑剔的比賽,我實際上會返回一個合適的布爾值而不是長度。像這樣:'function selectorExists(selector){try {return $(document).find(selector).length!== 0; } catch(e){return false; }}'...並且你不喜歡單行註釋格式;) – hashchange 2016-07-04 12:16:28

26

直來直去地說:

  1. 沒有,jQuery有沒有方法來檢查是否選擇是有效的。
  2. jQuery有很多正則表達式,所以你不能在代碼中找到一個
  3. 您不必爲此編寫一個巨大的正則表達式,答案更簡單,如下所示。

我明白你的問題,因爲我經歷過,有些情況下你不能控制選擇器給jQuery函數。

這個問題沒有足夠概括的是,如果選擇器無效jQuery拋出一個錯誤(這很重要,因爲這裏是答案)。

實施例使用jQuery v1.9.1的:

$('##somewhere'); 

它記錄到控制檯以下行:

throw new Error("Syntax error, unrecognized expression: " + msg); 

其源位於的jquery.js文件的4421行(非精縮和未壓縮版本)。

因此,而不是尋找的jQuery的內部方法(它肯定可以簡化事情,但不可用),你可以只聽拋出建立錯誤,如果選擇是有效的:

function isValidSelector(selector) { 
    if (typeof(selector) !== 'string') { 
     return false; 
    } 
    try { 
     var $element = $(selector); 
    } catch(error) { 
     return false; 
    } 
    return true; 
} 

你也可以把它jQuery插件:

jQuery.extend({ 
    isValidSelector: function(selector) { 
     if (typeof(selector) !== 'string') { 
      return false; 
     } 
     try { 
      var $element = $(selector); 
     } catch(error) { 
      return false; 
     } 
     return true; 
    } 
}); 

使用這種方式:

alert($.isValidSelector('#what?!?')); 

此致敬禮。

編輯: 添加類型驗證:選擇器必須是字符串。 無論如何,這是一個部分解決方案,它不會爲定義爲不是基本類型的字符串對象var selector = new String('#@wrong-selector#!');的選擇器返回false。

+2

正是我需要的。一千個投票! – Ziggy 2013-06-11 00:43:37

+0

感謝您的直接解釋! – 2014-07-16 11:51:18

+0

不幸的是,這個測試不是防彈的。您可以將原始HTML字符串傳遞給jQuery,並將其轉換爲節點並且不會引發異常。所以'isValidSelector(「

」)'返回true,即使它不是一個有效的選擇器。 – hashchange 2016-07-04 12:01:39

相關問題