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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

5回答

219閲覧

SPANの要素にアスタリスクを収めたいだけ。.html("*"); が作用しないのはなぜでしょうか

saya24

総合スコア221

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/01/30 01:47

編集2019/01/30 05:05

$(this).parent().parent().find(".errmark").html("*");
という記述をしていますが、当該要素SPANに アスタリスク * が収まってくれません。

セレクタが間違った部分を捉えている可能性を疑い、下記をブラウザ(IE)の開発ツール:コンソールで実行してみると
$(this).parent().parent().find(".errmark").prop("tagName");

SPAN
という返答を無事に得ています。正しい要素に焦点があたっているのかな、という認識です。

初歩的なことと思いますが、.html("")を効かすための手立てをご教授頂けませんでしょうか
findと併用できない??とか でしょうか

HTML

1<tr > 2 <td style="width: 9%;"><input type="hidden" name="rsvno"><button class="cdsrch" type="button"><img src="img/検索.png"></button><input type="text" name="cd[]" style="width: 64%; ime-mode: inactive;" /></td> 3 <td style="width: 31%;"><input type="text" name="name[]" style="width: 100%;" readonly /></td> 4 <td style="width: 15%;"><input type="text" name="capa[]" style="width: 100%;" readonly /></td> 5 <td style="width: 12%;"><button class="lotsrch" type="button"><img src="img/検索.png"></button><input type="text" name="lot[]" style="width: 75%; ime-mode: inactive;" /></td> 6 <td style="width: 7%;"><input type="text" name="reqrsv[]" style="width: 92%; ime-mode: inactive;" /></td> 7 <td style="width: 8%;"><input type="text" name="custockl[]" style="width: 95%;" readonly /></td> 8 <td style="width: 10%;"><input type="text" name="custocka[]" style="width: 95%;" readonly /></td> 9 <td style="width: 2%;"><span class="errmark" style="width: 100%;"></span></td> 10 <td style="width: 3%;"><button class="rowins" type="button" style="width: 100%;">+</button></td> 11 <td style="width: 3%;"><button class="rowdel" type="button" style="width: 100%;">-</button></td> 12</tr>

ちなみにconsole.log($(this).parent().parent().find(".errmark"));の結果は
undefinedでした。この状況ではhtml()の指示も無理でしょうね。

尚、$(this)の要素は1列目(一つ目のTDに収まった2つ目のINPUT要素 name=cd[]を指している想定での質問です)

JS

1$("input[name='cd[]']").on("change",function() { 2 $(this).parent().parent().find(".errmark").html("*"); 3});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/30 01:51

対応しようとしているHTMLを例示されたほうが良いかと思います。
Yasha_Wedyue

2019/01/30 01:52

この要素だけでは判断いたしかねます。 可能な範囲でHTMLと該当スクリプトを実行している部分の追記をお願いいたします。
m.ts10806

2019/01/30 01:53

また、コードはマークダウンのcode機能を利用してご提示ください。
m.ts10806

2019/01/30 01:55

下記の結果も合わせてご提示ください。 console.log($(this).parent().parent().find(".errmark"));
m.ts10806

2019/01/30 02:27

undefined 単に指定の仕方が間違っているだけですね。
m.ts10806

2019/01/30 02:29

いずれにしてもこれだけでは再現確認ができません。 ご提示のjqueryがどのタイミングで動作するのかも含めて全体の流れがわかり、他人が再現確認できるコードをご提示ください。
m.ts10806

2019/01/30 02:30

既に回答があるようにきちんと指定できていれば反映されるので。
x_x

2019/01/30 04:21

JavaScriptのコードも挙げてください
guest

回答5

0

tr中の要素の何れかをclickする等してイベントが発火しているものと仮定。
(かつ同じような構成のtrが複数存在すると想定)

で、例えば$(this).closest('tr').find('.errmark').text('*')とか。

投稿2019/01/30 02:22

madoka9393

総合スコア992

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

$(this)が何を示しているかによりますね
普通にやれば変更されます

javascript

1<script> 2$(function(){ 3 $('#hoge').find('span').html("*"); 4}); 5</script> 6<div id="hoge"> 7<span>1</span> 8<span>2</span> 9<span>3</span> 10</div>

投稿2019/01/30 02:17

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

※ 間違っていました

.find()でエレメントを複数選択していた場合、.html(文字列)では1つ目だけ変更されます(jQuery公式)。変更したいエレメントを1つだけ選べているか再確認してみてください。


本題ではありませんが、.htmlの名前の通り、HTMLとして操作されますので、余計なタグが入る、XSSなどの危険があります。タグとして認識させる必要がない場合は.text()を使うのが適切です。

投稿2019/01/30 01:52

編集2019/01/30 02:24
maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/01/30 02:14

> .find()でエレメントを複数選択していた場合、.html(文字列)では1つ目だけ変更されます ちょっと認識が違うと思います 参照されるのが1つ目の要素であって、変更の際はすべて変更されます
saya24

2019/01/31 03:47

これは今後の作業の上で非常に有用なコメントと思いました、ありがとうございます。
guest

0

セレクタが違います。わかりにくいのでエスケープが必要なら CSS.escape() を使うか(IE非対応)、別にclassをつけておいたほうがいいかもしれません。

jQuery

1$('input[name="cd\[\]"]').on('change', function(event) { 2 $(this).parent().parent().find(".errmark").html("*"); 3});

https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

投稿2019/01/30 05:22

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

失礼しました。
せっかく設定した文字を、後のコーディングで消しているようでした。

お恥ずかしい限り、皆様の貴重なお時間を頂きまして誠に申し訳ございませんでした。

投稿2019/01/30 05:17

saya24

総合スコア221

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

madoka9393

2019/01/30 05:23 編集

'*'を付与する処理自体は成功しているが、別の処理で'*'を消してしまっている ということだと解釈しました。 今後は各スクリプトにコメント(もしくはJSDoc)を付与するようにした方がよいのでは。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問