Home » jQuery 技巧

[jQ]如何透過包含 Meta-Characters 的 ID 來取得元素？

[ 日期： | 瀏覽：11,300 | 迴響：9 ]

jQuery 有用到一些 Meta-CHaracters(元字符) 來當做選擇器解析使用，像是 # . ~ [] : = > 等等。當要透過 id 時要使用 #id，而要包含屬性時要用 [attr]。

假設我們有一段 HTML：

檢視原始碼 HTML
1
2
3

<body>
	<div id="abgne" tw="台灣">jQuery：寫更少，做更多。</div>
</body>

所以我們要指定 id 為 abgne 及有 tw 屬性的元素內容的話，可以這樣寫：

檢視原始碼 JavaScript
1
2
3
4

$(function() {
	// -> jQuery：寫更少，做更多。
	alert($('#abgne[tw]').text());
});

如果....有個設計師或是程式設計師把 id 命名為 #abgne[tw] 的話：

檢視原始碼 HTML
1
2
3
4
5

<body>
	<div id="abgne" tw="台灣">jQuery：寫更少，做更多。</div>
 
	<div id="#abgne[tw]">jQuery：The Write Less, Do More.</div>
</body>

現在我們要取得 id 為 #abgne[tw] 的內容時，可能就有人想到，要用 id 則要在前面加上 #，所以就馬上寫成：

檢視原始碼 JavaScript
1
2
3
4

$(function() {
	// -> jQuery：寫更少，做更多。
	alert($('##abgne[tw]').text());
});

實際執行過後會發現一樣是取到第一個 id 為 abgne 的內容。為什麼會這樣呢？因為 # 跟 [] 都是 jQuery 設定好的選擇器字元符號，如果直接寫的話，在 [] 中間的值就會被認為是要判斷屬性用的。

若我們要使用的選擇器中又包含其它 Meta-CHaracters(元字符) 的話，則要在這些字元前面加上兩個反斜線(\\)來當做跳脫字元(Escape Characters)使用，因此要取得 id 為 #abgne[tw] 的話，則要寫成：

檢視原始碼 JavaScript
1
2
3
4

$(function() {
	// -> jQuery：The Write Less, Do More.
	alert($('#\\#abgne\\[tw\\]').text());
});

這樣就能正確的取到 #abgne[tw] 中的內容了。這邊整理出在 jQuery 中需要注意的 Meta-CHaracters(元字符) 清單：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#
.
[
]
(
)
&
,
+
*
~
'
:
"
!
^
$
=
>
|
/
;

雖然使用跳脫字元(Escape Characters)的方式可以解決問題，但建議還是只用單純的英數字符號來當做 id 名稱。

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

9 筆針對 [jQ]如何透過包含 Meta-Characters 的 ID 來取得元素？ 的迴響

    • 你...你當成寫 php 了嗎..?
      建議你可以把需求說清楚一點...如果這 1~10個要做的事情都一樣的話..一起綁就可以了

  2. 您好
    下面是我的原碼，我表單會由資料庫讀入不特定筆數的資料
    我想在每筆資料在後面增加一個jQuery控制項（當點擊按鈕後使text方塊可填入資料）
    因為每次存取出的筆數不同，因此我想用while自動產生jQuery程式碼控制項
    卻無法運行
    請問有方法可以解決嗎？ 感謝您

    while ($bCount>0){
    $("input[id='emailB"+$bCount+"']").bind('click',{counts:$bCount},checkBudget);

    function checkBudget(event){
    $("input[id='email"+$bCount+"']").attr('disabled',");
    }
    $bCount-;
    }

  4. 對不起，我現在只有本機端鍊習
    直接給您html碼，請您存成html檔看一下，謝謝

    Untitled Document

    名稱內容動作
    AA123
    BB456
    .......

    每次產生列數(資料筆數)不定（由資料庫抓出）
    當按下Button時，後面的text狀態由disabled變成可輸入狀態

    • 如果你的 html 排版是這樣的話..那可以試看看這樣做

      檢視原始碼 JavaScript
      1
2
3
4
5

      $(function(){
	$(':button[id^=emailB]').click(function(){
		$(this).next().attr('disabled', '');
	});
});

      要記得先引用 jQuery.js

發表迴響