使用 jQuery 查找和替换 HTML

Question

您好，我正在寻找页面中包含的 HTML 并使用 jQuery 替换它。

我已经花了几个小时在这里查看类似的问题，但我找不到任何可以完全实现我正在寻找的问题。

我的页面上有以下 HTML

<div id="mCSB_1_container" class="mCSB_container" dir="ltr" style="position:relative; top:0; left:0;">
<label class="">
<input type="checkbox" value="blazers">
<span>
Blazers & Waistcoats
<span class="prdctfltr_count">6/8</span>
</span>
</label>
<label class="">
<input type="checkbox" value="coatsjackets">
<span>
Coats & Jackets
<span class="prdctfltr_count">1/3</span>
</span>
</label>
  </div>

而且我需要一种方式说找到下面的代码

<label class="">
<input type="checkbox"

替换成

<option class=""

到目前为止，我查看的所有其他问题似乎都替换了丢失我需要保留的 value="" 属性的整个标签。

任何帮助将不胜感激。

编辑： 我需要按照下面的代码行结束，但我一步一步地进行

<div id="mCSB_1_container" class="mCSB_container" dir="ltr" style="position: relative; top: 0px; left: 0px;">
<select>
<option class="" value="blazers">
Blazers & Waistcoats
</option>
<option class="" value="coatsjackets">
Coats & Jackets
</option>
</select>
</div>

Answer 1

你应该可以这样做：

var $select = $('<select>');
$('#mCSB_1_container').append($select);
$('#mCSB_1_container label').each(function () {
    var $label = $(this);
    var $input = $label.find('input');
    var value = $input.val();
    var text = $label.text();
    $('<option>').val(value).text(text).appendTo($select);
    $label.remove();
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/yekxrca5/3/

这个解释有点啰嗦，显然可以缩短。

最终结果如下所示（重新格式化为空白未删除）：

<div id="mCSB_1_container" class="mCSB_container" dir="ltr" style="position:relative; top:0; left:0;">
   <select>
       <option value="blazers">Blazers &amp; Waistcoats 6/8</option>
       <option value="coatsjackets">Coats &amp; Jackets 1/3</option>
   </select>
</div>

• 您当然可以先从文本中删除所有空白。
• 您可能还希望将name="" 属性添加到选择中，以便将选定的值发送回服务器。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/yekxrca5/4/

如果您确实想保留标签中的类，请使用：

$('<option>').val(value).attr("class", $label.attr('class')).text($.trim(text)).appendTo($select);

JSFiddle： http://jsfiddle.net/TrueBlueAussie/yekxrca5/5/

更新：

如果你想保留当前的复选框控件，不要remove()它们，只需hide()它们（它们仅用于演示）并在选择更改时更新它们：

// update the checkboxes to match the selection
$select.change(function(){
    var selection = $(this).val();
    // Now find the matching checkbox by value and change selection
    var $cb = $(':checkbox[value="'+selection+'"]').prop('checked', true);
    $(':checkbox').not($cb).prop('checked', false);
}).change();

JSFiddle： http://jsfiddle.net/yekxrca5/8/

最后的change() 只是在加载时触发更改事件，因此当前选择被勾选。