jQyeryのclosest(),parents(),children()などの引数に複数のセレクタが使えるか

Garoonのポータル画面にスライダーを入れたいという仕事の依頼のお話です。
Garoonというのはサイボウズ株式会社が運営するグループウェアです。そのGaroonにはポータルという社内ポータルを実装する機能があるのですが、その中身の改修をしました。Garoonについてはhttps://garoon.cybozu.co.jp/を、Garoonのポータルについてはhttps://garoon.cybozu.co.jp/function/detail/portal/をのぞいてみてください。こんなことが出来るよ、という紹介ページです。この社内ポータルページにカルーセルスライダーを入れたいというご要望がありました。

jQueryのslickスライダーを入れようと思い……

Garoonの画面にはブロックという概念があるので、そのブロックの中にslickスライダーを突っ込もうと思って突っ込んだところ、画面がぶっ壊れました。カルーセルの横幅が430000pxぐらいになってハチャメチャな壊れよう。CSSでカルーセルの横幅をブロックの100%で指定してるのになぜ430000px……笑

Chromeのデベロッパーツールで見たところ、このブロックのHTML構成が厄介で、<div>の中に<table>が入っていて、僕が突っ込んだスライダーはその<td>の下に入ってました。<table>の中にslickを入れるとぶっ壊れるのですが、もちろんGaroon側のHTMLを修正する訳にもいかなかったので無理やりjQueryで親要素の<table>をblock要素に書き換えてみました。

すると、見事スライダーは正常に動作し、綺麗にクルクル出来るようになりました。<table>とslickスライダーって相性最悪なんですね。まぁうまくいったので良しとしましょう。Garoon側の仕様が変わったら壊れないかという懸念もありますが、スライダーの親の<table>をdisplay: block;にするだけなのでHTMLの構造が変わってもJSエラーも出ないと思われます。

こんな初心者っぽいコードですが、きちんとスライダーが動くようになりました。

$(function(){
    $('.slickslider').parents('table').css('display', 'block');
    $('.slickslider').parents('tbody').css('display', 'block');
    $('.slickslider').parents('tr').css('display', 'block');
    $('.slickslider').parents('td').css('display', 'block');
});

このparents()の羅列が汚くて嫌いなので…

で、本題ですが、上に書いたコードがどうしても生理的に嫌だったのでどうにかまとめられないか調べてみました。でも、どのサイトを見てもparents()やclosest()に複数のセレクタが指定できるかどうかが描かれていない。特殊な例だとは思うのであんまり触れられないのでしょうね。
どんなふうにしたかったかというと、セレクターをまとめて

$(function(){
    $('anyclass').closest('table', 'tbody', 'tr', 'td').css('display', 'block');
});

こうです笑。$()セレクタには複数指定できるんだからparents(),closest()もいけるんじゃないか？と思ったわけです。

で、満を持してこのコードをGaroonに突っ込んでみました。すると、カルーセルの横幅430000pxが再来！動かんのかい！と突っ込みを入れて元に戻しました。

まとめ

ということでparents()やclosest()には複数のセレクタを引数に指定することはできません。あまりにもどのサイトにも記載が無かったのでこの記事を残しておきます。