Question

您好我希望找到页面上包含的HTML并使用jQuery替换它。

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

我的网页上有以下HTML

＆＃13;

<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>

＆＃13;

我需要一种方法来查找以下代码

＆＃13;

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

＆＃13;

并将其替换为

＆＃13;

<option class=""

＆＃13;

到目前为止，我所看到的所有其他问题似乎都取代了失去价值的整个标签=＆＃34;＆＃34;属性我需要保留。

任何帮助都将不胜感激。

编辑：我需要最终得到以下代码的内容，但我一步一步地采取一步

＆＃13;

<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>

＆＃13;

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>

您当然可以先从文本中修剪所有空格。
您可能还想在select中添加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()他们（仅显示它们）并在选择更改时更新它们：< / p>

// 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()只是在加载时触发更改事件，以便勾选当前选择。

使用jQuery查找和替换HTML

1 个答案:

更新