Question

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

每个自动换行都有一个带有文件路径的数据文件夹。每个wrap中的每个<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>

此处的Codepen：https://codepen.io/rolandas/pen/XLEXPR?editors=1010

Answer 1

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>

Answer 2

可能不需要删除../，因为服务器/浏览器通常支持在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>

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

2 个答案: