アプリ版：「スタンプのみでお礼する」機能のリリースについて

マジレス希望

jQueryでの親の親の隣の子供の要素の取得をJavascriptで書くとどうなるのか?

解決済

  • 質問者：PlanetSD
  • 質問日時：
  • 回答数：2件

下記のコードは、●をクリックすると、その隣の、inputフォームにHello!!と入力されるようにしました。jQueryでは、指定したクラスより、$(this).parent().parent().next().children('input').val('Hello!World' ).focus();　のように、簡単に、親⇒親⇒次⇒子供のように、メソッドを連結させて取得できますが、これをjavascriptで書くとどのような書き方になるのでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1 …

<script>
$(function () {
$('table').on('click', '.maru', function(){
$(this).parent().parent().next().children('input').val('Hello!World' ).focus();
});

});
</script>
</head>

<body >

<table class="table">
<tbody>
<tr>
<td>1</td>
<td><div><div class="maru">●</div></div></td>
<td><input type="text" value=""></td>
</tr>

<tr>
<td>2</td>
<td><div><div class="maru">●</div></div></td>
<td><input type="text" value=""></td>
</tr>
</tbody>
</table>

</body>
</html>




今考えていることは、下記のように、配列に、順番にnodeNameとclassNameを取得して、何とかならないかと思っているのでけど、…　かなり検討ちがいなことしているような気がしてきたので、…質問するに至りました。　.... javascriptかなり難しいです。

<script>

document.addEventListener('click', function (e) {

var node = new Array();
node[0] = {nodeName:e.target.nodeName, className: e.target.className};

var parent = e.srcElement.parentNode;
for(var i = 1; parent; i++) {

node[i] = {nodeName:parent.nodeName, className:parent.className, };
parent = parent.parentNode;
}

console.dir(node);
});


</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： yambejp
  • 回答日時：

テーブルの親の親という時点でなにか勘違いがありそうです


またテーブルタグを指定する際にはテーブルが１つしかないという担保がないと処理できません
もし複数ある場合は、全てに適用するのか１番最初のものだけでいいのか仕様を提示しなくてはなりません
またchildで指定するinputについても同様です。
基本的にはparentNodeとnextElementSibling、querySelectorの組み合わせでやります
複数のタグにすべて適用するならquerySelectorAllをループ処理する必要があります
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご指摘ありがとうございます。jQueryについても、あやしい部分について確認してみます。

通報する
お礼日時：2017/11/20 22:07

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは


回答がないみたいなので・・・


＞これをjavascriptで書くとどのような書き方になるのでしょうか?
jQueryはjavascriptですので、そのままでもjavascriptだと言うことができますが、素のスクリプトで記述した場合という意味と解釈しました。

イベントの設定などは省くものとして、取得したエベント要素（div.maru）から、目的とする要素（input）を取得する方法として考えるならば、ご提示のHTMLの場合、「同じtr内の input type="text"要素」という考え方をすれば
　element.parentNode.parentNode.parentNode.querySelector("input[type='text']")
で取得できると思います。

他の考え方として、表内のセル位置に注目して「同じ行内の3列目のinput要素」と考えることもできますし、あるいはdiv.maruとinputが必ず1対1で対応しているのなら、「table内のdiv.maruのindex（順序）でtable内のinput要素を指定する」方法でも同様の結果になると思います。

＞parent().parent().next().children('input')
を忠実になぞるならば、parent()はparentNodeで、next()はnextSiblingで、children('input')はgetEiemensByTagName("input")やquerySelector("input")に置き換えればよいと思われます。
ただし、nextSibling等の場合はテキストノードもカウントしますので、これをスキップする処理などを加えておく必要があります。
例えば、
　var e = element.parentNode.parentNode.nextSibling;
　while(e && e.nodeName == "#text") e = e.nextSibling;
　if(e) e = e.querySelector("input[type='text']");
のような感じでしょうか。

とは言え、このような辿り方をしても、jQueryと完全に一致するわけではありません。
一番大きな違いは、jQueryでは要素数（単数、複数）にかかわらず同じ記述法をとることができますが、素のスクリプトの場合はそうではないからです。
また、通常のスクリプトではメソッドチェーン的な記述はできませんが、同じような記法をとりたければ、オレオレQueryのようなものを作成することで実現可能となるでしょう。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます。とても分かりやすく説明していただいて感謝します。
少々まちがった解釈をしてたので大きな気づきとなりました。

通報する
お礼日時：2017/11/20 21:56

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報