0

我有以下起始 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>

从这里的建议中，我有以下 jQuery 代码：

$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');

我需要做的是找到类.modal-content 的第一次出现（实际上有一个）。然后我需要将它包装在<form id="xxx"></form>".

接下来我需要查看表单，找到所有带有文本提交的按钮并将它们更改为“提交”类型。

我认为上面的代码可以做到这一点，但我想知道我是否可以让它更简单。我也有一些不同的方法来做 .wrap 的建议。这些建议是：

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

它们都可以正确使用吗？

4

2 回答 2

0

我认为它不能变得那么简单，但也许可以尝试：

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

我认为wrap()返回原始元素.modal-content，因此您应该能够在其中找到按钮，而无需find()在form元素上执行另一个。

于 2012-09-18T11:37:38.617 回答
0

您可以像这样定义不区分大小写:contains：

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

进而：

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

此解决方案假定按钮一直都在那里，您只需在它们周围包裹一个表单。

于 2012-09-18T11:53:46.677 回答