0

我有一个包含在名为“内容”的变量中的 HTML 字符串。HTML 字符串包含一个带 id 的 span，例如：

<span id="valuespan">This is the value of a text box</span>

我想使用跨度标记之间包含的任何内容作为复选框的值，但我不确定如何执行此操作。

谁能帮我吗？

谢谢！

4

4 回答 4

1

由于您的字符串仍然是字符串，而不是页面上的元素，您可以将尖括号与正则表达式匹配，或者使用 jQuery 创建一个元素并提取源

正则表达式

var content = '<span id="valuespan">This is the value of a text box</span>';
var text = content.match(/>(.*)<\/span>/)[1];
$(target-checkbox).val(text);

jQuery

var content = '<span id="valuespan">This is the value of a text box</span>';
var text = $(content).text();
$(target-checkbox).val(text);

正则表达式很糟糕，应该尽可能避免，但这也是 jQuery 的一个可怕用途。如果可能，您可能应该更深入地查看信息链，并以另一种方式处理文本。

编辑评论：对于多个跨度，具有唯一 ID

var content = '<span id="valuespan1">This is the value of a text box</span><span id="valuespan2">This is the value of a text box</span>';
var fragment = $('<div />').html(content);
var text1 = fragment.find('#valuespan1').text();
var text2 = fragment.find('#valuespan2').text();
于 2012-06-19T04:31:57.033 回答
0

要获取字符串：

var contents = $('#valuespan').text();

要将其应用于复选框：

$('#checkbox').val(contents);
于 2012-06-19T04:31:50.137 回答
0

为了动态地创建复选框，答案是：http: //jsfiddle.net/martinschaer/zQAHj/

var span = '<span id="valuespan">This is the value of a text box</span>';
var value = $(span).text();
var id = $(span).attr('id');
var field = '<input type="checkbox" name="' + id + '" id="' + id + '" value="' + value + '" />';
field += '<label for="' + id + '">' + value + '</label>';
$('#theform ul').append('<li>' + field + '</li>');

对于变量内的多个跨度：http: //jsfiddle.net/martinschaer/2b5Lj/

var span = '<span id="valuespan">This is the value of a text box</span><span id="valuespan2">This another text box value</span>';

$('span', $('<div>' + span + '</div>')).each(function(){
    var value = $(this).text();
    var id = $(this).attr('id');
    var field = '<input type="checkbox" name="' + id + '" id="' + id + '" value="' + value + '" />';
    field += '<label for="' + id + '">' + value + '</label>';
    $('#theform ul').append('<li>' + field + '</li>');
});
于 2012-06-19T04:52:41.120 回答
0

这假设跨度字符串不在页面中。我将内容变量包装在一个额外的 div 中，它确保可以使用find无论跨度处于什么级别的 html 层次结构

演示：http: //jsfiddle.net/8WZJT/

var content='<span id="valuespan">This is the value of a text box</span>';

$('#test').val($('<div>').append(content).find('#valuespan').text()).click(function(){
    alert($(this).val())
})
于 2012-06-19T04:40:31.537 回答