ulの中のliの個数に応じて多次元配列を作る方法

Question

以下のようなHTMLの構造を持っているものについて、最終的にhrefの中みを以下のような配列で持たせようと考えております。ulの代わりにdivタグの場合には"-"の代入を想定しています。
attachmentUrl = [["#"],["##","###"],["-"]]
つまり、liに対応するhrefを配列の要素に並べたいのですが、中にはliが複数存在する場合があるので、その場合には、多次元配列にして格納するという塩梅です。

そこで、以下のコードまで作ってliが一つの場合まではうまく実装できたのですが、多次元の場合がうまくコーディングのアイデアが浮かびません。
配列に要素をpushで追加する場合、空の配列を作ってpushすると思うのですが、多次元用に配列を作ると、添え字をもつ連想配列になってしまうと思ったため、うまくいかないでいます。

ここで、ul liの中には必ずaタグが含まれています。
何かよいアイデアはございますでしょうか。
宜しくお願い申し上げます。

<div id="view-table">
  <table>
    <tbody>
      <tr>
        <td></td>
        <td></td> 
        <td></td> 
        <td><ul><li><a href="##1"></a></li></ul></td>  
      </tr>
      <tr>
        <td></td>
        <td></td> 
        <td></td> 
        <td><ul><li><a href="##2"></a></li></ul></td>  
      </tr>
      <tr>
        <td></td>
        <td></td> 
        <td></td> 
        <td>
          <ul><li><a href="##3"></a></li></ul>
          <ul><li><a href="##4"></a></li></ul>
        </td>  
      </tr>
      <tr>
        <td></td>
        <td></td> 
        <td></td> 
        <td><div></div></td>  
      </tr>
    </tbody>
  </table>
</div>

その結果
[["##1"],["##2"],[["##3"],["##4"]],["-"]]となることを期待しております。
また、"-"となるべきdiv要素については<!--ここです-->でコメントしております。

Comments

[Zuishin]

[["#"],["##","###","-"]] になりませんか？
div だけは同じ階層にあっても別の配列になるんでしょうか？

[pegy]

Zuishin様
コメントありがとうございます。大変失礼しました。コードのHTMLの例が誤りです。
divについてもtrの中の4番目のtdの中に存在していて、異なる階層です。tr > td:eq(4)の中において
ulまたはdivが入っており
→　ul なら liが1個以上含まれて必ずaタグを含んでいる
→ divなら何が入っていても"-"として扱う
となります。

重ねてお詫び申し上げます。

[Zuishin]

了解しました。一応書いてみました。

Answer 1

追記

すみません。slice を splice と書いていました。
td の 4 番目はすべて div だったので、次で取得できていると思うんですが、どうでしょうか
長くなりすぎたので、今までの回答は削除しました。
編集履歴の中にあります。

const aToHref = a => new RegExp(/(?<=href=").+?(?=")/).exec(a.outerHTML)[0];
const liToHref = li => aToHref(li.querySelector("a"));
const tdToHref = td => Array
	.from(td.querySelectorAll("li, div"))
	.map(element => element.nodeName === "LI" ? liToHref(element) : "-");
const result = Array
	.from(document.querySelectorAll("#view-table tr"))
	.flatMap(a => Array.from(a.querySelectorAll("td")).slice(3, 4))
	.map(td => tdToHref(td));
console.log(result);

Comments

[pegy]

お力添え、ありがとうございます。ちょっと自分には容易には理解にいたることができないJSの書き方で衝撃を受けております。
ので、ちょっと修正しようと思っても簡単にいかないのですが、取得した結果td:eq(4)以外も全てのtdに関して取得できてしまっているのですが、コードを見る限り4列目以外のtdも取りに行っているように見えるのですが・・・

[pegy]

実際にはtableは一つしかないのですが4列目といっても
#view-table > table > tbody > trの各行の4つ目のtdだけが対象ということなのですが、おそらくresultの中身を見ると全て無差別に取得されていると解釈致しました

[Zuishin]

> splice(3, 4)

これで四つ目を選択しているはずですが、他のも取りにいっていましたか？
私のところではうまく動いているように見えます。

[pegy]

コメントありがとうございます。
関係のないものも取りに行っているようです。実際には5個取りに行くのが正しいところ24個取ってしまっています。
いま、厳密なtableの構造を取り出せるか試しております。

[Zuishin]

この回答は、あくまで質問のサンプルに合わせて作ってあります。もし深い階層に li や td や div などがあるのであれば、それを拾っているかもしれません。

[Zuishin]

または、テーブルや ul がほかにもあるとしたら、それも拾うと思います。

[pegy]

はい、テーブルは複数存在しうるので、#view-tableからのみを起点として出発しています

[Zuishin]

> document.querySelectorAll("tr")

これを次のように変えたらどうでしょうか？

> document.querySelectorAll("#view-table tr")

[pegy]

そこから出発した深い階層で同じ階層の構造を持つliやtdやdivはないです。もちろん単独のdiv等はありうるのですが、上記で記載の通りこの対象となるdivは必ず4つ目のtdの直下にあることに例外はありません。

[Zuishin]

返答のタイミングが重なって埋もれたかもしれないので、念のためもう一回書いておきます。

> document.querySelectorAll("tr")

これを次のように変えたらどうでしょうか？

> document.querySelectorAll("#view-table tr")

[pegy]

んん、少しとれる結果は変わったのですが、なぜか:eq(6)のデータも全て取得していますね。
確かに:eq(6)もul li のなかのaタグがあるという構造ではあるのですが。

[Zuishin]

うちでは取得しませんね。

もし、今の質問のデータ「なら」うまくいくのであれば、サンプルを問題が再現するものに差し替えてもらえますか？

[pegy]

承知を致しました。すみません、再現するにもあまりにも膨大なHTMLでそぎ落とすのもなかなかの状況なのですが、記載させていただきます

[pegy]

真に申し訳ございません。文脈的にわからなくなると思ったので、元のHTMLコードを残そうと思ったのですが、誤って消して保存してしまいました。さらに新しい再現コードはそのまま再現するために相当量になっており、teratailの文字数制限を超えていたので外部参照となってしまっています。
従って、解決後にできるだけシンプルなHTMLのコードを改めて本文に記載して残すように致したいと考えております。

[Zuishin]

こちらこそ申し訳ありませんでした。slice のことを splice と書いていました。四番目の td はすべて div だったので、そこだけ確認できています。

[pegy]

ありがとうございます。
すみません、eq(4)なので実際には5番目のtdとなりますね。するとslice(4,5)ですね！これで無事取得することができました！本当に心から感謝です。
本当に拙いご説明でお手数をお掛けしてしまったことにお詫びでございます。

[pegy]

本文のサンプルを単純ばHTMLに書き換えてcloseしますね♪

[Zuishin]

> eq(4)なので実際には5番目のtdとなりますね

そこも間違えていましたか。
失礼しました。

[pegy]

いずれにしても、多大ばご迷惑にお詫びと、お力添えに深々と御礼でございます！
本当にありがとうございましたー！

Answer 2

May I ask what you plan to do with this? I'm always just curious about people's plans.

Comments

[Zuishin]

ここは回答を書くところです。またこの質問は解決済みです。

Answer 3

This is all still kind of confusing for me but I don't know where to begin asking so I'll just take note and maybe come back later.

Answer 4

["#",["##","###"]]

こうするべきでは？

[["#"],["##","###"]]

Comments

[yambejp]

var hrefs=$('ul').map(function(){
return [$(this).find('li a').map(function(){
return $(this).attr('href');
}).get()];
}).get();
console.log(hrefs);

[yambejp]

おなじli内にアンカーが複数あったり、アンカーがなかったりする場合
どうしたいか例示した方がよいですね

[pegy]

ありがとうございます。曖昧な定義で申し訳ございません。本文にも加筆致しましたが、ulには必ずliタグがありその中にじゃアンカータグは必ず一つです。
一方細かい要件という意味で、記載を失念していた箇所があり、ulの代わりにdivがあるケースがあります。
その場合には配列に"-"を入れたいため、[["#"],["##","###"],["-"]]となります。
コメントを頂いた後にも関わらず、誠に申し訳ございません。

[pegy]

また、明示的に記載すべきか迷ったのですが、tdの中でも4列目のtdだけにこれを適用するためにtd:eq(4)を指定しています。他の列にもul liやdivを持つ構造の列はあるのですが、これを除外するために上記のコードを記載しております。

[yambejp]

liにはかならずアンカーがあって、
divはアンカーがあってもなくても参照するのですね？

[pegy]

はい、
①ul liタグの中には必ずaタグが含まれている
②ただし、それぞれのtr td:eq(4)のliタグの中のaタグ（の中のhref）だけを参照したい
③それぞれのtr td:eq(4)でもulの代わりにdivが入っている可能性があるがどのようなタグが含まれていても参照した上で"-"としたい。
ということになります。拙いご説明で申し訳ございません。分かりづらい点があればまたご指摘いただければ幸いです。