我有以下字符串,其中包含几个元素:
'<span class="fn" id="fn1">Matthew</span>
<span class="spouse" id="spouse1">Evelyn Ross</span>
<span class="bday" id="bday1">1456</span>
<span class="wday" id="wday1"></span>
<span class="dday" id="dday1">2000</span>'
将此解析为5个变量的最佳方法是什么?
修改
为清楚起见,这里是完整的代码,我正在为jEditable创建一个自定义输入类型,允许我内联编辑vcard。
$.editable.addInputType('person', {
element : function(settings, original) {
var fn = $('<input id="fn_"/>');
var bday = $('<input id="bday_" />');
var wday = $('<input id="wday_" />');
var dday = $('<input id="dday_" />');
var spouse = $('<input id="spouse_" />');
$(this).append(fn);
$(this).append(bday);
$(this).append(wday);
$(this).append(dday);
$(this).append(spouse);
/* Hidden input to store value which is submitted to server. */
var hidden = $('<input type="hidden">');
$(this).append(hidden);
return(hidden);
},
content : function(string, settings, original) {
var $data = $(string);
var data = {};
$data.each(function () {
var $t = $(this);
data[$t.attr('id')] = {
class: $t.attr('class'),
value: $t.text()};
});
alert(data.length());
$("#fn_", this).val('Name');
$("#bday_", this).val('Born');
$("#wday_", this).val('Married');
$("#dday_", this).val('Died');
$("#spouse_", this).val('Spouse');
},
submit: function (settings, original) {
var value = "<span class=fn>" + $("#fn_").val() + '</span>' + '<span class=spouse>' + $("#spouse_").val() + '</span>' + '<span class=bday>' + $("#bday_").val() + '</span>' + '<span class=wday>' + $("#wday_").val() + '</span>' +'<span class=dday>' + $("#dday_").val() + '</span>';
$("input", this).val(value);
}
});
答案 0 :(得分:6)
创建一个元素,将其放入包含innerHTML
的元素中,然后使用querySelector
选择它们。
所以假设你只想使用普通的旧js:
el = document.createElement('p');
el.innerHTML = '<span class="fn" id="fn1">Matthew</span> ... <span class="dday" id="dday1">2000</span>'
el.querySelector('.fn').innerText // = 'Matthew'
el.querySelector('#fn1').outerHTML // = "<span class="fn" id="fn1">Matthew</span>"
几乎直接翻译成jQuery:
el = $('<p />').html('<span class="fn" id="fn1">Matthew</span> ... <span class="dday" id="dday1">2000</span>');
el.find('.fn').text() // = 'Mathew'
答案 1 :(得分:2)
首先找到元素,然后使用attr()和text()或html()的组合从每个元素中获取数据。
您可以使用常用的selector字符串或问题中提到的原始字符串来查找元素。
var target_string = # ... raw string or selector for '#interesting span'
var $data = $(target_string);
# adjust this to produce the format you want
var data = {};
$data.each(function () {
var $t = $(this);
data[$t.attr('id')] = {id: $t.attr('id'),
class: $t.attr('class'),
value: $t.text()}; # or .html()
});
# you can access this example data via the id values in the html
data['spouse'] # or
data.spouse
答案 2 :(得分:0)
使用jQuery,查看text()
// get text from all spans
var all_text = $('span').text();
// break out into an array of values
var values = all_text.split(' ');
注意这将获得页面上所有span
标记的文本。因此,您需要创建一个更好的选择器,并且可能以比split()
更好的方式将其分配给变量。
答案 3 :(得分:0)
使用jQuery的.html
。