0

フィードバックの後、質問を完全に書き直します。

次のマークアップがあります。

<body>
  <h1>Title</h1>
  <p>bla</p>
  <div>
    ... <!-- a thousand tags -->
  </div>

  <div id="do-not-modify-me">
   <!-- a hundred tags -->
  </div>

</body>

アクセスできます：

  <h1>Title</h1>
  <p>bla</p>
  <div>
    ... <!-- a thousand tags -->
  </div>

使用:

$('body > *:not(div#do-not-modify-me)');

これにより、「do-not-modify-me」という ID を持つ div を除く本文のすべてのコンテンツを取得できます。

ここで、jquery を使用した選択と同じように、別のプログラマーが本体内の任意のものを選択できるようにする関数を作成したいとしましょう。他のプログラマーは div#do-not-modify-me を変更すべきではありませんが、気にする必要もありません。

$('body > *:not(div#do-not-modify-me)')頻繁に呼び出されるので、キャッシュします。

アイデアは次のとおりです。

// TEST CODE

windows.new_body = $('body > *:not(div#do-not-modify-me)');

function select(selector) {
    return $(selector, windows.new_body);
}

したがって、他のプログラマーは次のことができるはずです。

// TEST RESULT CODE
select("p").css("color", "red");

本体のすべてが赤くなります<p>が、div#do-not-modify-me に含まれるものは赤くなりません。

TEST CODE は機能しません。現在のところ、それ自体の結果ではなく、コンテキストの結果の子に css() を適用するためです。

例：

select("p").css("color", "red");

次のように動作します。

$('body > * p :not(div#do-not-modify-me)').css("color", "red");

望ましい結果は次のようになります。

$('body > p :not(div#do-not-modify-me)').css("color", "red");

ご了承ください ：

$('body > * :not(div#do-not-modify-me)').parent().css("color", "red");

<p>div#do-not-modify-me が赤くなるため機能しません。

TEST RESULT CODE の結果をどのように取得しますか? コードの任意の部分を変更できます。

4

4 に答える 4

1

コードはどんな方法でも変更できるとおっしゃいましたよね？検索したくないものではなく、検索したいものと考えてみませんか。残りのコードを a に置き、それをコンテキストとして使用します。エレガンス賞を受賞するつもりはありませんが、シンプルで Gets The Job Done TMです。<div>

于 2009-06-10T22:21:35.823 に答える
1

関連性がなくなったため、以前の編集はすべて削除しました。編集履歴で読むことができます。
EDIT3
基本的に問題は、セレクターをキャッシュできないことです。これは、$() 関数が、一致しないオブジェクトではなく、一致したオブジェクトを返すためです。これは、キャッシュされたセレクターを使用すると、キャッシュが実際の DOM と同期しなくなる可能性があることを意味します。つまり、この単純なページでは：

<div>
 <p>foo</p><p>bar</p>
</div>
<div class='bar'></div>

.

var context = $('body').children(':not(.bar)'); //this holds: <div><p>foo</p><p>bar</p></div>
$('div', context).append('<p class="x">HAI</p>'); 
//context still is <div><p>foo</p><p>bar</p></div> even though it should be
//<div><p>foo</p><p>bar</p><p class="x">HAI</p></div>

したがって、毎回選択をやり直す必要があります。基本的に、ここには 2 つのオプションがあります。 

//reselect the non-editable area everytime
function select(selector) {
  return $(selector, $('body').children(':not(div#do-not-modify-me)') );
}
//or, check the selection against being in the reselectable area.
function select(selector){
  return $(selector).filter(function(){
     return $(this).parents(':not(div#do-not-modify-me)');
  });
}

どちらが速いか自分で試してみてください。#do-not-modify-me div で検索しないようにする他の方法はないと思います。

これをさらに簡単にする（そして私が思うに速くする）ためにできることは、編集可能な領域をdivでラップすることです：

<body>
 <div id='modify-me'>
  <h1>Title</h1>
  <!-- thousands of tags -->
 </div>
 <div id='do-not-modify-me'>
  <!--hundreds of tags -->
 </div>
</body>

それからあなたはただすることができます

function select(selector) {
  return $(selector, $('#modify-me') );
}
于 2009-06-10T17:59:48.330 に答える
0

詳細な説明を読んだ後、私は自分のショットを試してみます：

context = $('body > *:not(div#do-not-modify-me)');
$("*:first",context);

あなたもできる：

  context = $('body > *:not(div#do-not-modify-me)');
  context.find( "*:first");

あなたができる要素の数を取得するには：

var len = context.length;

コレクション内の要素番号 i にアクセスするには、次を使用できます。

context.get(i);

また、 api.jquery.comには有用な情報がたくさんあります。これも読んで、おそらく独自のセレクターを作成したいと思うでしょう。

編集:
後、私はあなたの最近の更新を見ました。あなたが探しているのは、コンテキスト結果要素を反復処理する機能であると思います。したがって、ここで何度か言及したように実行できます。

    for ( var i = 0; i < context.length; ++i)
    {
         $( context[i]).method( );
         // do here you checks, adding, removing.
    }

これはそれほど賢くは見えませんが、機能するはずです。 $.fn を拡張し、目的に合わせて関数を実装することで、これをカプセル化できます。 編集＃2：
別の方法を試してみましょう：

    (function($)
    {
         $.fn.tagName = function( ) 
         {
             return this.get(0).tagName;
         };
         $.fn.pick = function( tag)
         {
             return this.filter( function( )
             {
                return $(this).tagName == tag;
             });
         };
    }

})(jQuery);

この後、contex.pick( "p") を実行できるため、結果セット内のすべての段落が返されますが、このコードは不完全であるため、jquery コードをさらに調べる必要があります。 pick 関数で完全な jquery 機能を使用できるようにするには、おそらくxpath DOM parserの使用を検討する必要があります。

于 2009-06-10T18:37:00.130 に答える
0

次のように、「コンテキスト」を直接使用できると確信しています。

context = $('body > *:not(div#do-not-modify-me)');
context.doStuff();
于 2009-06-10T18:01:32.633 に答える