如何让这个 jQuery 选择器正常工作？带有转义字符

Posted 2023-05-09

【中文标题】如何让这个 jQuery 选择器正常工作？带有转义字符

【英文标题】：How can I get this jQuery selector to work properly? With escaped characters

【发布时间】：2020-07-21 12:36:26

【问题描述】：

我正在尝试查找从文件上传库 Uppy 返回的特定元素。但由于某种原因，我放在一起的选择器总是空着。

它是这样的：

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

  ...

这是我尝试过的选择器字符串。在这种情况下，我试图通过其fileId 选择第一个列表项：

let test1 = "#uppy_" + fileId.replace(/([$%&()*+,./:;<=>?@\[\\\]^\|~])/g, '\\$1');
=> "#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 与我尝试使用 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"

有什么想法吗？是不是一直都在我眼皮底下？

【问题讨论】：

你想完成什么。如果您正在循环播放，我会使用.each()。你想选择哪个或者你想用它做什么？

你好@Twisty！是的，我正在使用 .forEach 来遍历 updatedFiles。我已经更新了包含在内的 OP。我想要做的是将一些元数据添加到每个 Uppy fileId 中，这些数据与文件被删除/添加到表单中的顺序相对应。 Uppy 是异步工作的，因此事物实际进入数据库并保存的顺序通常会导致事物被无序上传。所以我试图找到一种方法来保存/记录最初添加文件的顺序。

【参考方案1】：

fileId 中唯一需要转义的字符是 / 和 .。这似乎对我有用。

let test1 = fileId.replace(/[\/.]/g, "\\$&");

由于您要在***$files 集合中搜索元素，因此您应该使用.filter()，而不是.find()。后者只搜索后代，而不是***元素。

$files.filter(test1)

你可以这样使用.find()：

$("#uppy-form .uppy-Dashboard-files").find(test1)

【讨论】：

撞到额头 DOH！你是对的@Barmar！我应该是.filter()ing 是的，你说得对，只需要逃避/ 谢谢你让我直截了当！ 击掌

【参考方案2】：

考虑以下内容。

$("#uppy-form .uppy-Dashboard-files > li").each(function(i, el)
  $(el).attr("data-up-id", i);
);

这将迭代每个元素并执行所需的操作。