指定状態まで同じ処理を繰り返す

Question

番号と照合する処理を繰り返す方法を探しております。

下記のHTMLで、ancestor="x-a-c-g"を基準として、リストと照合し、

ancestor="x-a-c-g"を表示
ancestor="x-a-c"を表示
ancestor="x-a"を表示

という風に最後の２つになるまで照合する処理を繰り返すことが目的です。

<style>
.list {display: none;}
<style>

<li class="list">
  Xさん</li>
<li class="list" ancestor="x">
  aさん（xさんの子）</li>
<li class="list" ancestor="x-a">
  bさん（aさんの子）</li>
<li class="list" ancestor="x-a">
  cさん（aさんの子）</li>
<li class="list" ancestor="x">
  dさん（xさんの子）</li>
<li class="list" ancestor="x-a-c">
  eさん（cさんの子）</li>
<li class="list" ancestor="x-d">
  fさん（dさんの子）</li>
<li class="list" ancestor="x-a-c">
  gさん（cさんの子）</li>
<li class="list" ancestor="x-a-b">
  hさん（bさんの子）</li>
<li class="list" ancestor="x-a-b-h">
  iさん（hさんの子）</li>
<li class="list" ancestor="x-a-c-g">
  jさん（gさんの子）</li>
<li class="list" ancestor="x">
  kさん（xさんの子）</li>
<li class="list" ancestor="x-a-c-e">
  lさん（eさんの子）</li>
<li class="list" ancestor="x-a-c-g">
  mさん（gさんの子）</li>
<li class="list" ancestor="x-a-c-g-m">
  nさん（mさんの子）</li>

イメージとしては下記のようなjQueryになると思うのですが、処理を繰り返す方法がわからず、お恥ずかしながらこのような書き方になってしまいます。

//ターゲット
var target = 'x-a-c-g';

//ターゲットのリスト（mさん、jさん）を表示
$( '.list' ).each( function() {
  var list = $(this).attr('ancestor');
  if( target == list ){
    $(this).fadeIn();
  }
});

//ターゲットの先祖のリスト（gさん、eさん、cさん、bさん）を表示
$( '.list' ).each( function() {
  
  //【１】１段前の親（gさん、eさん）を開く
  var list_slice1 = $(this).attr('ancestor').split('-').slice(0, -1).join('-');
  var target_slice1 = target.split('-').slice(0, -1).join('-');
  if( target_slice1 == target_slice1 ){
    $(this).fadeIn();
  }
  
  //【２】２段前の親（cさん、bさん）を開く
  var list_slice2 = $(this).attr('ancestor').split('-').slice(0, -2).join('-');
  var target_slice2 = target.split('-').slice(0, -2).join('-');
  if( target_slice2 == target_slice2 ){
    $(this).fadeIn();
  }  
  
});

質問をまとめますと、jQueryの【１】【２】の部分を繰り返す方法についてです。

（ただし基準となるのはancestor="x-a-c-g"とは限らずancestor="x-a-c-g-m-p-t-w"になったりと都度その長さが異なるので、上のjQueryのように「sliceする数を増やす」ではいくつ増やせばいいかわかりません。きっと正しい処理は「基準のハイフンが１個になるまで繰り返す」のようなイメージかと思います。）

親子関係にしては構造がおかしなHTMLで大変恐縮ですが、ひとまずこの構造で目的が達成できるような方法をご教示頂ければ幸甚に存じます。

どんなアドバイスでも構いませんので、何卒ご指導のほど宜しくお願い申し上げます。

Answer 1

ではヒントワードだけ。

「再帰」

で調べてみてください。

他の方から丸っとコード例が出てきちゃうかもしれませんが、私はあえてここまでしか回答しません。

Comments

[skipping]

調べて来たのですが…、私にはまだまだ、遠かったです。とはいえヒントをありがとうございます。今後とも精進致します。どうぞまた宜しくお願い致します。

Answer 2

こういうことですか？

var str="x-a-c-g-m-p-t-w";
var arr=[];
var c=0;
while(r=str.match(new RegExp("(.+)(?:-.?){"+(c+1).toString()+"}$"))){
  arr.unshift(r[1]);
  if(c>10) break;
  c++;
}
console.log(arr);

修正版

var str="x-aaa-111-222bbb-ccc333";
var arr=[];
var c=0;
while(r=str.match(new RegExp("(.+)(-.+){"+c+"}$"))){
  arr.unshift(r[1]);
  if(c>10) break; //上限設定
  c++;
}
console.log(arr);

「-」で始まる「なにか」がc回繰り返して文末になるものをヒットし
その前の部分を(.+)で受けて、rという変数に渡している
参照は１つ目のカッコなのでr[1]

Comments

[skipping]

ありがとうございます。できました。

質問の構造の場合はできたのですが
（https://jsfiddle.net/6xp89Lht/2/）

ひょっとしてアルファベットでなく数字だったり、またはクラスの位置が変わるとできないでしょうか？
（https://jsfiddle.net/6xp89Lht/）

ご提示いただいたコードが難解でアレンジを効かせる余力がございませんで、誠に心苦しいのですがもう一声頂けませんでしょうか。

[yambejp]

2文字以上になる可能性があるということですかね？

RegExpのカッコ内にある「?:-.?」を「?:-.+?」に変えてみてください

[skipping]

なるほど、文字数の問題でしたか。できました。たびたびのご返信、心から感謝申し上げます。
「?:-.?」や「?:-.+?」は何を表すのでしょうか。これを検索して。で結構ですのでご教示頂けたらと思います。お忙しければここでスルーして頂いて構いません。誠にありがとうございました。

[yambejp]

修正と解説をちょこっといれておきました

[skipping]

ご丁寧にどうもありがとうございます。とても助かりました。よく勉強しておきます。