Как я могу заставить этот селектор jQuery работать правильно? С побегами - PullRequest
Новая
       34

Как я могу заставить этот селектор jQuery работать правильно? С побегами

0 голосов
/ 09 апреля 2020

Я пытаюсь найти определенный элемент, который возвращается из 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

И то, что бросает меня за al oop, заключается в том, что если я go в самом элементе списка, он ясно заявляет, что 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"

Есть идеи? Это то, что было у меня под носом все это время?

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Рассмотрим следующее. 

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

Это будет повторять каждый элемент и выполнять необходимое действие.

1 голос
/ 09 апреля 2020

Единственные символы в fileId, которые необходимо экранировать, это / и .. Мне кажется, это работает. 

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

И так как вы ищете элементы в коллекции $files верхнего уровня, вы должны использовать .filter(), а не .find(). Последний ищет только потомков, а не элементы верхнего уровня. 

$files.filter(test1)

Вы можете использовать .find() таким образом: 

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