Question

I have the following starting HTML:

<div id="modal" ><div class="modal-window">
<ul class="action-tabs right">
<li><a href="#" title="Close window">
<img src="/Content/images/icons/fugue/cross-circle.png" width="16" height="16"></a></li>
</ul>
<div class="block-content"><h1>xx</h1>
<div class="modal-content>
...
</div>
</div>
</div>

From suggestions here I have the following jQuery code:

$modal
    .find('.modal-content')
    .wrap("<form id='modal-form'>")
$modal
    .find('#modal-form')
    .find("button")
    .filter(function () {
        return $(this).text().toLowerCase().indexOf('submit') != -1;
    })
    .prop('type', 'submit');

What I need to do is to find the first occurence (there’s actually one ever one)
of the class .modal-content. I then need to wrap this in <form id="xxx"></form>".

Next I need to look within the form, find all the buttons with text submit and
change them to be of type “submit”.

I think the above code will do that but I am wondering if i could make it simpler.
Also I have suggestions for a few different ways to do the .wrap. These suggestions
were:

$('.modal-content').wrap('<form id="xxx" />');
$(".modal-content").wrap('<form id="xx"></form>');
$( '.modal-content' ).wrapAll( '<form />' );

Would they all be correct to use?

Answer 1

You can define a case-insensitive :contains like this:

$.extend($.expr[':'], {
  "contains-ci": function(elem, i, match) {
    return jQuery.fn.text.apply(elem).toLowerCase().indexOf(match[3].toLowerCase()) > -1;
  }
});

And then:

$modal
.find('.modal-content')
.wrap('<form id="modal-form">')
.find('button:contains-ci("submit")')
.prop('type', 'submit');

This solution assumes the buttons are there all along and you just wrap a form around them.