如何解析HTML&使用jQuery替换字符串中的标签?

时间:2016-11-03 07:40:19

标签: javascript jquery html parsing

我有一个像这样的字符串(这里为了便于阅读而不明白):

var input='<div id="container" style="max-width: 310px;">
    <div class="popupheadermap">
        <b>YFC</b>
    </div>
    <input checked="checked" id="tab-1" name="tab-group" type="radio">
    <label for="tab-1">Administration</label>
    <input id="tab-2" name="tab-group" type="radio">
    <label for="tab-2">Information</label>
    <div id="content">
        <div id="content-1">
            <td>Id</td>
            <td class="tablerow">1252</td>
        </div>
        <div id="content-2">
            <td>Type</td>
            <td class="tablerow">Gym</td>
        </div>
    </div>
</div>
<div id="EditContainer">
    <button class="editMarker" id="1252"><i aria-hidden="true" class="fa fa-pencil editicon"></i>Edit Location</button>
</div>';

使用jQuery我想替换EditContainer div的内容,以便它变为:

<div id="EditContainer">
    <button id="1126_1" class="saveCancel"><i class="fa fa-floppy-o editicon" aria-hidden="true"></i>Save Edit</button> 
    <button id="1126_2" class="saveCancel"><i class="fa fa-ban editicon" aria-hidden="true"> </i>Cancel Edit</button>
</div>

但是当我使用find $(input).find('#EditContainer')时,我得到一个空的输出。

如何解析此字符串,并替换EditContainer div?

的内容

1 个答案:

答案 0 :(得分:2)

您遇到的问题是let col1 = UIColor.red let col2 = UIColor.red // the output is "matched" print(col1 == col2 ? "matched" : "no match") let customCol1 = UIColor(colorLiteralRed: 123.0/255.0, green: 243.0/255.0, blue: 46.0/255.0, alpha: 0.9) let customCol2 = UIColor(colorLiteralRed: 123.0/255.0, green: 243.0/255.0, blue: 46.0/255.0, alpha: 0.9) // the output is "matched" print(customCol1 == customCol2 ? "matched" : "no match") let customCol3 = UIColor(colorLiteralRed: 123.0/255.0, green: 243.0/255.0, blue: 46.0/255.0, alpha: 0.9) let customCol4 = UIColor(colorLiteralRed: 123.0/255.0, green: 243.0/255.0, blue: 46.0/255.0, alpha: 1.0) // the output is "no match" print(customCol3 == customCol4 ? "matched" : "no match") 元素位于字符串的根级别,因此您需要使用#EditContainer,而不是filter()。试试这个:

&#13;
&#13;
find()
&#13;
var input = '<div id="container" style="max-width: 310px;">' +
    '<div class="popupheadermap">' +
        '<b>YFC</b>' +
    '</div>' +
    '<input checked="checked" id="tab-1" name="tab-group" type="radio">' +
    '<label for="tab-1">Administration</label>' +
    '<input id="tab-2" name="tab-group" type="radio">' +
    '<label for="tab-2">Information</label>' +
    '<div id="content">' +
        '<div id="content-1">' +
            '<td>Id</td>' +
            '<td class="tablerow">1252</td>' +
        '</div>' +
        '<div id="content-2">' +
            '<td>Type</td>' +
            '<td class="tablerow">Gym</td>' +
        '</div>' +
    '</div>' +
'</div>' +
'<div id="EditContainer">' +
    '<button class="editMarker" id="1252"><i aria-hidden="true" class="fa fa-pencil editicon"></i>Edit Location</button>' +
'</div>';

var $input = $(input);
$input.filter('#EditContainer').html('<button id="1126_1" class="saveCancel"><i class="fa fa-floppy-o editicon" aria-hidden="true"></i>Save Edit</button><button id="1126_2" class="saveCancel"><i class="fa fa-ban editicon" aria-hidden="true"> </i>Cancel Edit</button>');
$input.appendTo('body');
&#13;
&#13;
&#13;