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 の最初の出現 (実際には 1 つある) を見つけることです。次に、これを でラップする必要があり<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

次のように大文字と小文字を区別しない: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 に答える
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 に答える