人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

div id="root"直下の複数の子のそれぞれの要素について、それぞれの値やチェックボックスが
チェックされているかどうか、セレクトボックスから何が選択されているか
を取り出したいと考えています。

↓の例では、root直下にchild01という子が存在し、param01,param02,param03
という名前のdivの下に、チェックボックス、テキストインプット、セレクトボックスが存在
しています。

動的に増える子ノードchild01,child02,・・・について、それぞれのチェックボックス、テキスト
インプット、セレクトボックス(nameは全てのノードで同一)のチェックされているかどうか、テキストの入力値、セレクトされた
オプションの値を取得したいのですが、どう書けばいいでしょうか?
jQueryを使用して書いた方が楽であれば、そのサンプルでも構いません。

<div id="root">
<div id="child01">
<div name="param01">
<input type="checkbox" name="example" value="チェックボックス">チェックボックス
</div>
<div name="param02">
<input type="text" name="param0201" value="インプット!">
</div>
<div name="param03">
<select name="param0301">
<option selected value="yes!">yes!
<option value="no!">no!
</select>
</div>
</div>
</div>

●質問者: tono5652
●カテゴリ:ウェブ制作
✍キーワード:jQuery name root yes いるか
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ardarim
●30ポイント

条件どおり厳密に書くとこんな感じです。

getAllParams() で、child01,child02,…の各値を取得して、Arrayオブジェクトで返します。test()はテスト用です。

function getChildById(root, id)
{
 var i;

 for(i = 0; i < root.childNodes.length; i++){
 if(root.childNodes[i].id == id){
 return root.childNodes[i];
 }
 }

 return null;
}

function getChildByName(root, name)
{
 var i;

 for(i = 0; i < root.childNodes.length; i++){
 if(root.childNodes[i].name == name){
 return root.childNodes[i];
 }
 }

 return null;
}

function getInputValueByType(root, type)
{
 var i;
 var tagName;

 if(root == null) return null;
 tagName = (type == "select" ? "SELECT" : "INPUT");

 for(i = 0; i < root.childNodes.length; i++){
 if(root.childNodes[i].nodeName == tagName){
 if(tagName == "SELECT" || root.childNodes[i].type == type){
 if(type == "checkbox"){
 return root.childNodes[i].checked;
 } else {
 return root.childNodes[i].value;
 }
 }
 }
 }

 return null;
}

function getAllParams()
{
 var root = document.getElementById("root");
 var child;
 var i;
 var v, p;

 result = new Array;
 for(i = 1; ; i++){
 id = "child" + String("0" + i).slice(-2);
 child = getChildById(root, id);
 if(child == null) break;
 v = new Object;
 //
 p = getChildByName(child, "param01");
 v.param01 = getInputValueByType(p, "checkbox");
 //
 p = getChildByName(child, "param02");
 v.param02 = getInputValueByType(p, "text");
 //
 p = getChildByName(child, "param03");
 v.param03 = getInputValueByType(p, "select");

 if(v.param01 == null || v.param02 == null || v.param03 == null){
 break;
 }
 result.push(v);
 }

 return result;
}

function test()
{
 var params;
 var i, t;

 params = getAllParams();

 t = "";
 for(i = 0; i < params.length; i++){
 t = t + params[i].param01 + "/" + params[i].param02 + "/" + params[i].param03 + "\n";
 }

 alert(t);

}

rootの子ノードは必ずchildNNという名前で、必ず01,02,…の順で並んでいるなど、前提となる条件がある場合はもうちょっと簡略化できます。

◎質問者からの返答

ありがとうございます。

このプログラムでは、Rootの子ノード(ChildNN)の子ノードのパラメタを取得していらっしゃいますよね?

サンプルのHTMLでは、Rootの子ノード(ChildNN)の子ノードはただのDIVで、さらにその子ノード(Childの孫ノード)として、inputやselectを用意しています。

なので、この場合は、さらにもう一段深いノードについてgetInputValueByTypeをしないといけないということですよね?


2 ● ardarim
●10ポイント

コメント欄が空いていないので追加回答します。(コメント欄を空けておくと補足ができますのであけておくほうが良いと思います)


サンプルのプログラムは、質問のHTMLと組み合わせて期待する動作をすることを確認しています。

サンプルでは、

(1)rootというidをもつノードを探す

(2)rootの子ノードで、childNNという形式のidをもつ子ノードを列挙する

(3)2の子ノードの子ノード(rootの孫ノード)で、param01、param02、param03のnameをもつ子ノードのinput/selectパラメータを取得する

という動きになっており、以下のような構造を想定しています。(サンプルHTMLと同じです)

<DIV id="root">
  <DIV id="child01">
    <DIV name="param01">
      <INPUT ...>

実際には以下のような構造ということでしょうか?

<DIV id="root">
  <DIV id="child01">
    <DIV>
      <DIV name="param01">
        <INPUT ...>

3層目のDIVが無名かどうか、3層目にはDIVが1つだけなのか/2つ以上のDIVがあるのかどうかなどでも変わってきますが、やり方としてはご指摘の通りchildNNの子ノードを取得して、そのノードに対してgetInputValueByTypeを呼び出すことになります。

◎質問者からの返答

詳しい解説ありがとうございます。助かりました。


3 ● Mars
●40ポイント ベストアンサー

jquery使ったサンプル。

div name="paramXX" の nameは邪魔になるので

(というかdiv要素にはname属性は無いので)

消しています。


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
// #root 直下のdivのリスト
var rootChilds = $("#root > div");

// child(#0)配下のname="example"へのアクセス;
alert( $("[@name='example']",rootChilds[0])[0].checked );

// child(#1)配下のname属性を持つ要素(#2)へのアクセス(multipleは無いと断定)
alert( $("[@name]",rootChilds[1])[2].value);

// 全部
for(var i=0;rootChilds[i];i++){
var params = $("[@name]",rootChilds[i]);
for(var j=0;params[j];j++){
var result = (params[j].type && params[j].type=='checkbox')?
params[j].checked:params[j].value;
alert(rootChilds[i].id +'::'+
params[j].name+'::'+result);
}
}
});
</script>
</head>
<body>

<div id="root">
 <div id="child01">
 <div>
 <input type="checkbox" name="example" value="チェックボックス">チェックボックス
 </div>
 <div>
 <input type="text" name="param0201" value="インプット!">
 </div>
 <div>
 <select name="param0301">
 <option selected value="yes!">yes!
 <option value="no!">no!
 </select>
 </div>
 </div>
 <div id="child02">
 <div>
 <input type="checkbox" name="example" value="チェックボックス" checked>チェックボックス
 </div>
 <div>
 <input type="text" name="param0201" value="いんぷっと">
 </div>
 <div>
 <select name="param0301">
 <option value="yes!">yes!
 <option selected value="no!">no!
 </select>
 </div>
 </div>
</div>

</body>
</html>
◎質問者からの返答

jQueryを使うとかなりシンプルですね。助かりました。ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ