Question

我有以下开始的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 />' );

使用它们都是正确的吗？

Answer 1

我认为不能那么多更简单但可能会尝试：

$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。< / p>

Answer 2

您可以像这样定义不区分大小写的: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');

这个解决方案假定按钮一直存在，你只需在它们周围包裹一个表格。

我可以将jQuery选择器组合到多个元素中吗？

2 个答案: