在Sizzle/jQuery中选择Id带有冒号的元素

06odsfpq  于 2023-01-20  发布在  jQuery
关注(0)|答案(1)|浏览(115)

我有一个HTML,它有一些带有冒号的元素,例如,

<div id="i:have:colons">Get my selector!!</div>
<my:another:test> This time with tag names </my:another:test>

我想使用jQuery选择这些元素。下面是我的几次尝试和Jsbin Demo

function escape(id) {
  return id.replace( /(:|\.|\[|\])/g, '\\$1');
}

var id = "i:have:colons";

// Does not work
console.log($('#' + id).length);

// Works
console.log($("#i\\:have\\:colons").length);

var escapedId = escape(id);

// Q1. Why answer shows only 1 backslash while I used 2 in regex
console.log(escapedId); //'i\:have\:colons'

// Works
console.log($('#' + escapedId).length);

// Q2. Does not work while escapedId === 'i\:have\:colons'. How and why ?
console.log($('#' + 'i\:have\:colons').length);

T.J回答后编辑

var tag = 'my:another:test';

console.log('Testing tag name now----');

console.log($(tag).length);

var tag2 = tag.replace(/[:]/g, '\\\\:');

// Does not work with tagnames but this works with Id
console.log($(tag2).length);

var tag3 = tag.replace(/[:]/g, '\\:');

// Q3. Why does this work with tagnames but not with ids ?
console.log($(tag3).length);

我的问题在JS代码的注解中。

8zzbczxx

8zzbczxx1#

// Q1.为什么答案只显示1个反斜杠,而我在regex中使用了2
因为你用来替换的字符串只有一个反斜杠,因为反斜杠在字符串常量中是特殊的,为了在选择器中得到一个真正的反斜杠,你需要在字符串常量中使用\\,但是你的escape函数是正确的,因为你在实际的正则表达式中只需要一个反斜杠。
// Q2. escapedId === 'i\:have\:colons'时无法工作。如何工作?为什么?
console.log($('#' + 'i\:have\:colons').length);
同样的原因,选择器中没有反斜杠。字符串常量中的\:就是:。您需要转义反斜杠:

console.log($('#' + 'i\\:have\\:colons').length);

用于选择这些元素的选项:
1.使用escape函数正确转义id值。
1.使用getElementById

$(document.getElementById("i:have:colons"))

1.使用属性选择器:

$('[id="i:have:colons"]')

但是这样做会比较慢(尽管它起作用的可能性很低),因为jQuery不会将其优化为getElementById调用。

相关问题