如何在嵌套循环中循环遍历多个数组？

Question

我正在尝试为每个 a 元素查找和替换 URL。

每个包装都有带有文件路径的数据文件夹。每个包装内的每个 <a> 元素都链接到一个文件。问题是每个 <a> 都可以与文件夹链接起来，例如“../”或多个“../../../”。我必须检查每个文件夹有多少个“../”，并为每个“../”删除一个文件夹。像“/文件夹/”

这是我的 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>

Codepen 在这里：https://codepen.io/rolandas/pen/XLEXPR?editors=1010

Answer 1

可能您不需要删除 ../，因为 servers/browsers 通常支持在 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>

Answer 2

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>

如何在嵌套循环中循环遍历多个数组？

How to loop in nested loop through multiple arrays?

javascript

nested-loops