如何让这个 jQuery 选择器正常工作?带有转义字符
How can I get this jQuery selector to work properly? With escaped characters
我正在尝试查找从文件上传库 Uppy 返回的特定元素。但是由于某种原因,select或者我放在一起的结果一直是空的。
这是它的样子:
Object.keys(updatedFiles).forEach(fileId => {
let $files = $("#uppy-form .uppy-Dashboard-files").children('li');
$files =>
0:li#uppy_uppy-screenshot/from/2019/07/10/06/34/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-25444-1562758476913.uppy-u-reset.uppy-DashboardItem
1:li#uppy_uppy-screenshot/from/2019/07/22/04/17/30/png-10-10-1d-1d-10-1d-1d-1e-image/png-9572-1563787053498.uppy-u-reset.uppy-DashboardItem
2:li#uppy_uppy-screenshot/from/2019/07/22/04/17/46/png-10-10-1d-1d-10-1d-1d-1e-image/png-130128-1563787069142.uppy-u-reset.uppy-DashboardItem
3:li#uppy_uppy-screenshot/from/2019/07/22/04/18/01/png-10-10-1d-1d-10-1d-1d-1e-image/png-130002-1563787085262.uppy-u-reset.uppy-DashboardItem
4:li#uppy_uppy-screenshot/from/2019/07/22/04/24/23/png-10-10-1d-1d-10-1d-1d-1e-image/png-29323-1563787465594.uppy-u-reset.uppy-DashboardItem
5:li#uppy_uppy-screenshot/from/2019/07/22/04/29/01/png-10-10-1d-1d-10-1d-1d-1e-image/png-41412-1563787753290.uppy-u-reset.uppy-DashboardItem
6:li#uppy_uppy-screenshot/from/2019/10/14/17/18/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-813933-1571091517693.uppy-u-reset.uppy-DashboardItem
7:li#uppy_uppy-screenshot/from/2019/10/14/17/18/47/png-10-10-1d-1d-10-1d-1d-1e-image/png-1121037-1571091530669.uppy-u-reset.uppy-DashboardItem
8:li#uppy_uppy-screenshot/from/2019/10/14/17/22/35/png-10-10-1d-1d-10-1d-1d-1e-image/png-1108169-1571091758565.uppy-u-reset.uppy-DashboardItem
9:li#uppy_uppy-screenshot/from/2019/10/18/03/40/01/png-10-10-1d-1d-10-1d-1d-1e-image/png-70136-1571388003926.uppy-u-reset.uppy-DashboardItem
10:li#uppy_uppy-screenshot/from/2019/10/18/03/40/43/png-10-10-1d-1d-10-1d-1d-1e-image/png-77492-1571388045454.uppy-u-reset.uppy-DashboardItem
...
}
这是我试过的 select 或字符串。在这种情况下,我试图 select 第一个列表项 fileId
:
let test1 = "#uppy_" + fileId.replace(/([$%&()*+,./:;<=>?@\[\\]^\{|}~])/g, '\');
=> "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/png-10-10-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"
let test2 = "#uppy_" + fileId.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\]^`{|}~]/g, "\\$&")
=> "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/png-10-10-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"
let test3 = "#uppy_" + fileId.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\]^`{|}~]/g, "\$&")
=> "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/png-10-10-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"
$files.find(test1) =>
jQuery.fn.init [prevObject: jQuery.fn.init(11), context: document, selector: "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/…-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"]
context:document
length:0
显然它不喜欢正斜杠的双打,所以 test2 出局了...
$files.find(test2) =>
Uncaught Error: Syntax error, unrecognized expression: #uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/png-10-10-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913
$files.find(test3) =>
jQuery.fn.init [prevObject: jQuery.fn.init(11), context: document, selector: "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/…-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"]
context:document
length:0
让我陷入循环的是,如果我进入列表项本身,它清楚地表明 id
与我尝试 select 与 test1 和 test3 相匹配(尽管, 没有转义字符)
$files.first()
jQuery.fn.init [li#uppy_uppy-screenshot/from/2019/07/10/06/34/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-25444-1562758…, prevObject: jQuery.fn.init(11), context: document]
0:li#uppy_uppy-screenshot/from/2019/07/10/06/34/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-25444-1562758476913.uppy-u-reset.uppy-DashboardItem
...
id:"uppy_uppy-screenshot/from/2019/07/10/06/34/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-25444-1562758476913"
有什么想法吗?是不是一直就在我眼皮底下?
fileId
中唯一需要转义的字符是 /
和 .
。这似乎对我有用。
let test1 = fileId.replace(/[\/.]/g, "\$&");
并且由于您是在顶级 $files
集合中搜索元素,因此您应该使用 .filter()
,而不是 .find()
。后者只搜索后代元素,不搜索顶级元素。
$files.filter(test1)
您可以这样使用 .find()
:
$("#uppy-form .uppy-Dashboard-files").find(test1)
考虑以下因素。
$("#uppy-form .uppy-Dashboard-files > li").each(function(i, el){
$(el).attr("data-up-id", i);
});
这将迭代每个元素并执行所需的操作。
我正在尝试查找从文件上传库 Uppy 返回的特定元素。但是由于某种原因,select或者我放在一起的结果一直是空的。
这是它的样子:
Object.keys(updatedFiles).forEach(fileId => {
let $files = $("#uppy-form .uppy-Dashboard-files").children('li');
$files =>
0:li#uppy_uppy-screenshot/from/2019/07/10/06/34/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-25444-1562758476913.uppy-u-reset.uppy-DashboardItem
1:li#uppy_uppy-screenshot/from/2019/07/22/04/17/30/png-10-10-1d-1d-10-1d-1d-1e-image/png-9572-1563787053498.uppy-u-reset.uppy-DashboardItem
2:li#uppy_uppy-screenshot/from/2019/07/22/04/17/46/png-10-10-1d-1d-10-1d-1d-1e-image/png-130128-1563787069142.uppy-u-reset.uppy-DashboardItem
3:li#uppy_uppy-screenshot/from/2019/07/22/04/18/01/png-10-10-1d-1d-10-1d-1d-1e-image/png-130002-1563787085262.uppy-u-reset.uppy-DashboardItem
4:li#uppy_uppy-screenshot/from/2019/07/22/04/24/23/png-10-10-1d-1d-10-1d-1d-1e-image/png-29323-1563787465594.uppy-u-reset.uppy-DashboardItem
5:li#uppy_uppy-screenshot/from/2019/07/22/04/29/01/png-10-10-1d-1d-10-1d-1d-1e-image/png-41412-1563787753290.uppy-u-reset.uppy-DashboardItem
6:li#uppy_uppy-screenshot/from/2019/10/14/17/18/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-813933-1571091517693.uppy-u-reset.uppy-DashboardItem
7:li#uppy_uppy-screenshot/from/2019/10/14/17/18/47/png-10-10-1d-1d-10-1d-1d-1e-image/png-1121037-1571091530669.uppy-u-reset.uppy-DashboardItem
8:li#uppy_uppy-screenshot/from/2019/10/14/17/22/35/png-10-10-1d-1d-10-1d-1d-1e-image/png-1108169-1571091758565.uppy-u-reset.uppy-DashboardItem
9:li#uppy_uppy-screenshot/from/2019/10/18/03/40/01/png-10-10-1d-1d-10-1d-1d-1e-image/png-70136-1571388003926.uppy-u-reset.uppy-DashboardItem
10:li#uppy_uppy-screenshot/from/2019/10/18/03/40/43/png-10-10-1d-1d-10-1d-1d-1e-image/png-77492-1571388045454.uppy-u-reset.uppy-DashboardItem
...
}
这是我试过的 select 或字符串。在这种情况下,我试图 select 第一个列表项 fileId
:
let test1 = "#uppy_" + fileId.replace(/([$%&()*+,./:;<=>?@\[\\]^\{|}~])/g, '\');
=> "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/png-10-10-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"
let test2 = "#uppy_" + fileId.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\]^`{|}~]/g, "\\$&")
=> "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/png-10-10-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"
let test3 = "#uppy_" + fileId.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\]^`{|}~]/g, "\$&")
=> "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/png-10-10-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"
$files.find(test1) =>
jQuery.fn.init [prevObject: jQuery.fn.init(11), context: document, selector: "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/…-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"]
context:document
length:0
显然它不喜欢正斜杠的双打,所以 test2 出局了...
$files.find(test2) =>
Uncaught Error: Syntax error, unrecognized expression: #uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/png-10-10-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913
$files.find(test3) =>
jQuery.fn.init [prevObject: jQuery.fn.init(11), context: document, selector: "#uppy-screenshot\/from\/2019\/07\/10\/06\/34\/34\/…-1d-1d-10-1d-1d-1e-image\/png-25444-1562758476913"]
context:document
length:0
让我陷入循环的是,如果我进入列表项本身,它清楚地表明 id
与我尝试 select 与 test1 和 test3 相匹配(尽管, 没有转义字符)
$files.first()
jQuery.fn.init [li#uppy_uppy-screenshot/from/2019/07/10/06/34/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-25444-1562758…, prevObject: jQuery.fn.init(11), context: document]
0:li#uppy_uppy-screenshot/from/2019/07/10/06/34/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-25444-1562758476913.uppy-u-reset.uppy-DashboardItem
...
id:"uppy_uppy-screenshot/from/2019/07/10/06/34/34/png-10-10-1d-1d-10-1d-1d-1e-image/png-25444-1562758476913"
有什么想法吗?是不是一直就在我眼皮底下?
fileId
中唯一需要转义的字符是 /
和 .
。这似乎对我有用。
let test1 = fileId.replace(/[\/.]/g, "\$&");
并且由于您是在顶级 $files
集合中搜索元素,因此您应该使用 .filter()
,而不是 .find()
。后者只搜索后代元素,不搜索顶级元素。
$files.filter(test1)
您可以这样使用 .find()
:
$("#uppy-form .uppy-Dashboard-files").find(test1)
考虑以下因素。
$("#uppy-form .uppy-Dashboard-files > li").each(function(i, el){
$(el).attr("data-up-id", i);
});
这将迭代每个元素并执行所需的操作。