2

入力タグには終了タグがあるはずがないため、一連の入力タグの間にあるテキスト/HTML を抽出する簡単な方法はありますか? たとえば、以下の場合は を取得します<b>Bob and Tim</b><br>Tim <i>after</i> Bob<br>。

<div id="inputs">
    <input type="text" value="bob" size="4" />
    <b>Bob and Tim</b><br>
    <input type="text" value="tim" size="4" />
    Tim <i>after</i> Bob<br>
    <input type="button" value="get textbox values" id="mybutton" />
</div>​

http://jsfiddle.net/gLEZd/5/

テキストボックスの値を取得できますが、どうすれば上記を達成できますか?

4

5 に答える 5

4

マークアップを少し変更するだけで、簡単に変更できます。

HTML:

<div id="inputs">
    <input type="text" value="bob" id="bob" size="4" />
    <label for="bob"><b>Bob and Tim</b><br></label>
    <input type="text" value="tim" id="tim" size="4" />
    <label for="tim">Tim <i>after</i> Bob<br></label>
    <input type="button" value="get textbox values" id="mybutton" />
</div>

JS:

$("#mybutton").click( function() {
  $.each($('input[type="text"]'), function() {
     alert($('label[for=' + this.id + ']').text());
  });
});

デモ

タグが気に入らない場合はlabel、以下のようにコンテンツをスパン内にラップするだけです。

<div id="inputs">
    <input type="text" value="bob" id="bob" size="4" />
    <span><b>Bob and Tim</b><br></span>
    <input type="text" value="tim" id="tim" size="4" />
    <span>Tim <i>after</i> Bob<br></span>
    <input type="button" value="get textbox values" id="mybutton" />
</div>

そしてJSでは、

$("#mybutton").click( function() {
  $.each($('input[type="text"]'), function() {
     alert($(this).next().text());
  });
});

デモ

于 2012-04-24T17:06:05.617 に答える
2

フィドルで多かれ少なかれ利用可能で、コメントに記載されています。ただし、ここでは他のコードも直接、簡単な説明とともに示します。

$("#mybutton").click( function() {
  var tempContainer = $("#inputs").clone();
  tempContainer.find("input").remove();
  alert(tempContainer[0].innerHTML);
});​

このようにしてコンテナが複製され、入力が複製されたコンテナから削除されます...最終的に、入力のないinnerHTMLがあります

于 2012-04-24T17:47:06.710 に答える
1

これが望ましいかどうかはわかりませんが、次のようにテキストを削除できます。

alert ( $('#inputs').unwrap().text() );

ただし、これにより、あなた<b></b>のタグや他のタグも削除されます。

于 2012-04-24T17:20:54.500 に答える
1 
$("#mybutton").click( function() {
    var x = $('div#inputs :not(:input)');
    $.each(x, function() {
       console.log(this.innerHTML);
    });
});

アップデート

$("#mybutton").click( function() {
    var x = $('div#inputs :not(:input)').filter(function() {
        return this.toString();
    });
    console.log(x); // x is the array of DOM Object
});
于 2012-04-24T17:06:29.240 に答える
0

理想的には、情報が入力要素にリンクされている場合は、 を使用する必要があります<label for="">。次に、関連付けられている値に簡単にアクセスできます。

<div id="inputs">
    <input id="input1" type="text" value="bob" size="4" />
    <label for="input1"><b>Bob and Tim</b><br></label>
    <input id="input2" type="text" value="tim" size="4" />
    <label for="input2 ">Tim <i>after</i> Bob<br></label>
    <input type="button" value="get textbox values" id="mybutton" />
</div>

また：

$("#mybutton").click( function() {
  $.each($('input[type="text"]'), function() {
    alert($(this).next('label').text());
  });
});

または：

$("#mybutton").click( function() {
  $.each($('input[type="text"]'), function() {
    alert($('label[for='+this.id+']').text());
  });
});
于 2012-04-24T17:06:50.757 に答える