指定したテキストを持つli要素の取得

前提・実現したいこと

id="firstname"を基準に、要素を辿っていって、「"未入力"の文字を含む」li要素を取得したいのですが、
どのように辿ってセレクタを指定すればよいか、ご教示お願いします。

辿り方としては、id="firstname"を基準に、ul.errorList_text>liのものを辿りたいです。

該当のソースコード

HTML
1<body>
2	~~<div>~~
3		<ul class="errorList_text">
4			<li style="display:none;"><img src="caution.jpg" alt="error">小文字のみ有効です。</li>
5			<li style="display:none;"><img src="caution.jpg" alt="error">未入力です。</li>
6		</ul>
7		<p>
8			<input type="text" id="firstname">
9		</p>
10	~~</div>~~
11</body>

すみません、divは適当でした。pやulの親階層はもっと複雑なので省略しています。

試したこと

id="firstname"の要素は取得できました。
li要素の辿り方と、liのテキストに指定した文字を含むという条件指定の方法がわかりません。
とりあえず、テキストを含むの条件は考えずにli要素を辿ることを試みましたが、それもできませんでした。

jQuery
1$(function() {
2	$("#firstname").addClass("error");
3
4        //辿れませんでした。あと、テキストを含むという条件指定がわかりません。
5	$("#firstname").prev("ul.errorList_text>li").show();
6});

行動規範の内容に同意します

回答3件

本題からそれますが、
そもそもの作りのほうから見直された方が良いのではないでしょうか。
hideしておいてshowではなく、入力チェックで引っかかった処理の分だけappendするやり方が本来望ましいと思います。

若干無理やりです。
errorのliを回しながらis:containsで検索かけます。

js
1    $(function(){
2        const error_node = $("#firstname").parent("p").prev("ul.errorList_text").children("li");
3        for(let i=0;i<error_node.length;i++){
4            if($(error_node[i]).is(":contains('未入力')")){
5                $(error_node[i]).show();
6            }
7        }
8    });

HTMLも下記のようにして#firstname部分を変更し確認してみました。

html
1        <ul class="errorList_text">
2            <li style="display:none;"><img src="caution.jpg" alt="error">1小文字のみ有効です。</li>
3            <li style="display:none;"><img src="caution.jpg" alt="error">2未入力です。</li>
4        </ul>
5        <p>
6            <input type="text" id="firstname1">
7        </p>
8        <ul class="errorList_text">
9            <li style="display:none;"><img src="caution.jpg" alt="error">小文字のみ有効です。</li>
10            <li style="display:none;"><img src="caution.jpg" alt="error">未入力です。</li>
11        </ul>
12        <p>
13            <input type="text" id="firstname2">
14        </p>
15        <ul class="errorList_text">
16            <li style="display:none;"><img src="caution.jpg" alt="error">小文字のみ有効です。</li>
17            <li style="display:none;"><img src="caution.jpg" alt="error">未入力です。</li>
18        </ul>
19        <p>
20            <input type="text" id="firstname3">
21        </p>

投稿2019/02/19 06:33

編集2019/02/19 07:10

m.ts10806

総合スコア80850

tkshp

2019/02/19 06:38

ご回答ありがとうございます。なるほど、それがよいやり方なのですね。今回、諸事情により、HTMLファイルは極力いじらないという制約がかかっている為、このような質問になりました。

m.ts10806

2019/02/19 06:43

なるほど。ちょっと面倒ですね。ちなみになぜ#firstnameから辿りたいのでしょうか？複数同じような組があって、「そのinputの所属する.errorList_textをとる」という仕様なのでしょうか。

tkshp

2019/02/19 06:47

ご回答ありがとうございます。おっしゃる通りです。複数同じような組がある為です。

m.ts10806

2019/02/19 06:57

んーせめて、各inputのグループを別で囲いたいですね。 <div id="firstname_form"> <ul class="errorList_text"> <li style="display:none;"><img src="caution.jpg" alt="error">小文字のみ有効です。</li> <li style="display:none;"><img src="caution.jpg" alt="error">未入力です。</li> </ul> <p> <input type="text" id="firstname"> </p> </div> 全て並列にあるとかなり厄介です。

tkshp

2019/02/19 07:26

ご回答ありがとうございます。 .is(":contains('未入力')"))で検索がかけられるのですね。とても勉強になりました。ベストアンサー、非常に迷いました。ありがとうございました。

m.ts10806

2019/02/19 07:30

無理やりなのでちょっと微妙なんです。制限があるからというのでそこはなぜか分からないですが、現状からどうにかするより扱いやすいHTMLにする方が後々のメンテナンス性や汎用性考えると格段に良いです。

行動規範の内容に同意します

ベストアンサー

firstnameからの相対位置をとるなら例えばこう

javascript
1<script>
2$(function(){
3  $('#firstname').closest('p').siblings().find('li').filter(function(){return $(this).text().match(/未入力/);}).css("display","");
4});
5</script>
6<div>    
7<ul class="errorList_text">
8<li style="display:none;"><img src="caution.jpg" alt="error">小文字のみ有効です。</li>
9<li style="display:none;"><img src="caution.jpg" alt="error">未入力です。</li>
10</ul>
11<p>
12<input type="text" id="firstname">
13</p>
14</div>

投稿2019/02/19 07:08

yambejp

総合スコア114843

tkshp

2019/02/19 07:26

ご回答ありがとうございます。とても勉強になりました。ありがとうございました。

行動規範の内容に同意します

テキストノードを調べることは可能ですが、翻訳されたりすると面倒です。
CSS で行うことをお勧めします。

HTML
1<li class="required"><img src="caution.jpg" alt="error">未入力です。</li>

CSS
1.errorList_text li {
2  display: none;
3}
4
5[data-error="required"] .errorList_text li.required {
6  display: list-item;
7}

jQuery
1$("#firstname").closest('div').attr('data-error', 'required');

投稿2019/02/19 06:58

x_x

総合スコア13749

tkshp

2019/02/19 07:24

ご回答ありがとうございます。勉強になりました。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！