CODEWITHSUNDEEP
javascriptjqueryhtmlreplace
Luke Boobyer
Luke Boobyer

Reputation: 55

Find and replace HTML using jQuery

Hi I am looking to find HTML contained on the page and replace it using jQuery.

I have spent hours looking at similar questions on here but I couldn't find any that achieve exactly what I am looking for.

I have the following HTML on my page

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

And I need a way to say find the following code 

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

and replace it with 

<option class=""

So far all the other questions I have looked at seem to replace the entire tag which loses the value="" attribute I need to keep.

Any assistance would be appreciated.

Edit: I need to end up with something along the lines of the code below but I'm taking it one step at a time

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

Upvotes: 1

Views: 495

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

You should be able to do it with something like this:

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/

This one is a little long-winded for explanation and can obviously be shortened.

The end result looks like this (reformatted as white-space is not removed):

<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>
  • You could of course trim all white-space from the text first.
  • You also probably want to add a name="" attribute to the select so that you get a selected value posted back to the server.

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

And if you do want to retain the classes from the labels, use:

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

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

Update:

If you want to retain the current check box controls, don't remove() them, just hide() them (they are shown for demonstration only) and update them as the selection changes:

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

The change() at the very end just triggers a change event at load time, so that the current selection is ticked.

Upvotes: 2

Related Questions