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 
$("#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 回答
1

不确定这是否可取，但您可以精简为如下文本：

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

不过，这也会剥离您的<b></b>标签和其他标签。

于 2012-04-24T17:20:54.500 回答
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 回答