Как зациклить во вложенном цикле через несколько массивов? - PullRequest
Новая
       18

Как зациклить во вложенном цикле через несколько массивов?

2 голосов
/ 01 июля 2019

Я пытаюсь найти и заменить URL-адреса для каждого элемента.

В каждой оболочке есть папка с данными и путь к файлу.Каждый элемент <a> внутри каждой обертки ссылается на файл.Проблема в том, что каждый <a> может быть связан с папкой вверх, например, "../" или несколько - "../../../".Я должен проверить, сколько «../» у каждого есть, и для каждого «../» удалить одну папку.как '/ folder /'

Это мой HTML: 

<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/">
  <a href="/folder1/folder1/_WAS_Modeller_DNK1.htm">Link</a>
  <a href="../folder1/folder2/Modeller.htm">Link</a>
  <a href="../../folder1/folder2/Modeller.htm">Link</a>
</div>

<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/data_folder_4">
  <a href="../folder1/folder2/folder3/Specifikationer.htm">Link</a>
</div>

И jQuery: 

console.clear();

var wrap = $(".wrap");

$.each(wrap, function(index, value) {
  var file = $(this).attr("data-folder");
  var fileArray = file.split("/");
  var links = $(this).find("a");

  // loop for link elements (a), it looops 4 times in this case
  $.each( links, function( ind, val ){
    var $this = $(this);
    var aHref = $(this).attr('href');
    var hrToArr = aHref.split("/");
    console.log(hrToArr);

    $.each(hrToArr, function( indx, va ){
      if( va == '..' ){
        fileArray.pop();
        $this.addClass( fileArray );
        console.log(va);
      }
    });
  })
});

Результаты должны быть: 

<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3">
  <a href="data_folder_1/data_folder_2/data_folder_3/folder1/folder1/_WAS_Modeller_DNK1.htm">Link</a>
  <a href="data_folder_1/data_folder_2/folder1/folder2/Modeller.htm">Link</a>
  <a href="data_folder_1/folder1/folder2/Modeller.htm">Link</a>
</div>

<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/data_folder_4">
  <a href="data_folder_1/data_folder_2/data_folder_3/folder1/folder2/folder3/Specifikationer.htm">Link</a>
</div>

Кодовый код здесь: https://codepen.io/rolandas/pen/XLEXPR?editors=1010

Ответы [ 2 ]

2 голосов
/ 01 июля 2019 
var wrap = $(".wrap");

$.each(wrap, function(index, value) {
  var file = $(this).attr("data-folder");
  var fileArray = file.split("/").filter(Boolean);
  var links = $(this).find("a");

  // loop for link elements (a), it looops 4 times in this case
  $.each( links, function( ind, val ){
    var $this = $(this);
    var aHref = $(this).attr('href');
    var hrToArr = aHref.split("/").filter(Boolean);
    /* console.log(hrToArr) */;
    let a = fileArray;
    let b = [];
    $.each(hrToArr, function( indx, va ){
        if(va === '..') {
        fileArray.pop();
      } else {
      b.push(va)
      }
    });
    $this.attr('href', a.concat(b).join('/'));
  })
});

Выход: 

<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/">
  <a href="data_folder_1/data_folder_2/data_folder_3/folder1/folder1/_WAS_Modeller_DNK1.htm">Link</a>
  <a href="data_folder_1/data_folder_2/folder1/folder2/Modeller.htm">Link</a>
  <a href="folder1/folder2/Modeller.htm">Link</a>
</div>

<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/data_folder_4">
  <a href="data_folder_1/data_folder_2/data_folder_3/folder1/folder2/folder3/Specifikationer.htm">Link</a>
</div>
0 голосов
/ 01 июля 2019

Возможно, вам не нужно удалять ../, поскольку серверы / браузеры обычно поддерживают поиск подкаталога в URL (например, /a/b/../c будет интерпретироваться как /a/c).Однако я делаю это в коде ниже 

let w=[...document.querySelectorAll('.wrap')];

for(let v of w) {  
  let f = v.dataset.folder.split('/');
  for(let a of [...v.children]) {
    let n= a.outerHTML.match(/href="(.*)">/)[1].match(/\.\.\//g);
    n = n ? n.length : 0;
    let p= n==0 ? f : f.slice(0,-n||1);
    a.href = p.join('/') + a.pathname.replace(/\.\.\//g,'');
  }
}


let w=[...document.querySelectorAll('.wrap')];

for(let v of w) {  
  let f = v.dataset.folder.split('/');
  for(let a of [...v.children]) {
    let n= a.outerHTML.match(/href="(.*)">/)[1].match(/\.\.\//g);
    n = n ? n.length : 0;
    let p= n==0 ? f : f.slice(0,-n||1);
    a.href = p.join('/') + a.pathname.replace(/\.\.\//g,'');
  }
}
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3">
  <a href="/folder1/folder1/_WAS_Modeller_DNK1.htm">Link</a>
  <a href="../folder1/folder2/Modeller.htm">Link</a>
  <a href="../../folder1/folder2/Modeller.htm">Link</a>
</div>

<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/data_folder_4">
  <a href="../folder1/folder2/folder3/Specifikationer.htm">Link</a>
</div>
...