javascript - 读取 HTML block 表单变量，查找带有 id 的特定标签元素，以及在哪里查找标签插入文本!用 jQuery？

Question

我有一个 HTML block 作为变量，然后我需要在这个 block (变量)上找到特定标签，例如(span，a，input)，并创建它们的列表，并且在哪里找到这些标签，我必须输入文字(例如 9)。我生成了此代码，但无法在找到标签的位置插入我的文本 (9)。

var htmlraw ='<div id="myDiv"><table id="table1"><tr><td><span id="span11">hello</span></td></tr></table><span id="span2">hello</span><table id="table3"><tr><td>hello</td></tr></table><table id="table4"><tr><td><a id="a1">hello</a></td></tr></table><table id="table5"><tr><td><input id="i1" type="text">hello</input></td></tr></table></div>';

var html = $.parseHTML(htmlraw);

var list = new Array();
$(htmlraw).find('span,a,input').each(function(){ 
    var element = new Array();
    element[0] = this.id;
    element[1] = '9';
    list.push(element);
});
alert(list);
// get content

for ( var i = 0, l = list.length; i < l; i++ ) {
    var element = list[i];
    var id = element[0];
    var value = element[1];
    /*
    var results = $(htmlraw).find('#'+id);
    var obj = null;
    if (results != null && results.length > 0)
        obj = results[0];
    alert(obj.id);
    */
    $(html).('#'+id).text(value);    
}

alert(htmlraw);

http://jsfiddle.net/mkmazid/1uua57ys/

Answer 1

新答案:

你似乎有一个 html 字符串存储在变量中，并且你想找到所有 a , input ，和span该字符串中的标签，并更新它们所保存的值，同时将变量维护为字符串。

问题是您有一个字符串，但您试图以 DOM elements 的形式访问元素。 。最简单的事情可能是在某处有一个隐藏的 div，将其 html 设置为 htmlraw (创建实际的 dom 元素)，操作元素，然后更新 htmlraw使用隐藏 div 中修改后的 html。

var htmlraw ='<div id="myDiv"><table id="table1"><tr><td><span id="span11">hello</span></td></tr></table><span id="span2">hello</span><table id="table3"><tr><td>hello</td></tr></table><table id="table4"><tr><td><a id="a1">hello</a></td></tr></table><table id="table5"><tr><td><input type="text" id="i1" value="hello"/></td></tr></table></div>';


$('#processingDiv').html(htmlraw);


$('#processingDiv').find('span,a,input').each(function(i, element){     
       if (element.tagName == "INPUT") {
           $(this).attr('value', '9');
       }
       else{
           $(this).html('9');
       }
    
});

htmlraw=$('#processingDiv').html();

alert(htmlraw);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="processingDiv" style="display:none"></div>

原始答案:

这就是您需要的jsfiddle

为了使其正常工作，我更改了 $(html).('#'+id).text(value);至$('#'+id).text(value);并从Frameworks & Extensions中选择jquery jsfiddle 中的面板

另外，请注意变量中的 html 有错误。 <input id="i1" type="text">hello</input>应该是<input id="i1" type="text" value="hello"/>

正如 @charlietfl 提到的，如果您更清楚自己想要做什么，可能有更好的方法来满足您的需求