javascript - 如何在连续的 <input> 之间获取 text/html？

Question

由于输入标签不应该有结束标签，是否有一种简单的方法可以在一系列输入标签之间提取文本/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/

我可以获取文本框的值，但如何实现上述目的？

Answer 1

只需稍作标记更改即可轻松完成，

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());
  });
});

DEMO

如果您不喜欢 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());
  });
});

DEMO