0

以前にjQueryとJavascriptでいくつかのことを行ったことがありますが、残念ながら私は専門家ではありません. できるだけ少ないリソースを使用してタスクを達成する方法についてのヒントは見つかりませんでした。あなたたちはおそらく私を助けることができます：

これが私がやりたいことです：

次のようなページ上のすべての BB コードのような要素を (正規表現を使用して) 検索したい:

[ここのインデックス=パラメータのランダムデータ]

次に、それぞれを次のような ajax 呼び出しから受け取ったコンテンツに置き換えたいと思います。

call.php?index=here=パラメータ ランダムデータ

または、対応する [ndex] タグ内から取得したパラメーター。

これまでの私の解決策/思考プロセスは次のとおりです。

$(document).ready(function() {
    var pattern = /\[ndex\s+(.*?)\]/mg;
    var documentText = $(document.body).text();
    var matches = documentText.match(pattern);

    $('*').each(function () { 
        var searchText = this;
        if ($(searchText).children().length == 0) { 
            $.each(matches, function() {
                //here is where I would need to check for a match and make a call 
                }
            }); 
        } 
    });
});

ここからの働き方がよくわかりません。私のスケッチは本当にぎこちなくて複雑に思えます。よりエレガントで簡単なソリューションが必要です。

助けてくれてどうもありがとう。:)

4

2 に答える 2

1

私はこのようなことをします：

function ndex_treat(n) {
  // If element is ELEMENT_NODE
  if(n.nodeType==1)
  {
    // If element node has child, we pass them to function ndex_treat
    if(n.hasChildNodes())
      for(var i= 0; i<n.childNodes.length; i++)
        ndex_treat(n.childNodes[i]);
  }
  // If element is TEXT_NODE we replace [ndex ...]
  else if(n.nodeType==3)
  {
    var matches, elemNdex, elemText;
    // While there is one
    while(/\[ndex\s+(.*?)\]/m.test(n.nodeValue))
    {
      // Taking what's before (matches[1]), the "attribute" (matches[2]) and what's after (matches[3])
      matches= n.nodeValue.match(/^([\s\S]*?)\[ndex\s+(.*?)\]([\s\S]*)$/m)
      // Creating a node <span class="ndex-to-replace" title="..."></span> and inserting it before current text node element
      elemNdex= document.createElement("span");
      elemNdex.className= 'ndex-to-replace';
      elemNdex.title= matches[2];
      n.parentNode.insertBefore(elemNdex, n);
      // If there was text before [ndex ...] we add it as a node before
      if(matches[1]!=="")
      {
        elemText = document.createTextNode(matches[1]);
        elemNdex.parentNode.insertBefore(elemText, elemNdex);
      }
      // We replace content of current node with what was after [ndex ...]
      n.nodeValue=matches[3];
    }
  }
}

$(function(){
  // Get the elements we want to scan ( being sharper would be better )
  $('body').each(function(){
    // Passing them to function ndex_treat
    ndex_treat(this);        
  });

  // Make the ajax calls
  $('.ndex-to-replace').each(function(){
    // Don't know if necessary
    var current= this;
    $.get('call.php?ndex='+encodeURIComponent(this.title),function(data){
      $(current).replaceWith(data);
    });
  });
});

jqueryでtextNodeを操作するのはかなり悪いと思うので、jqueryではなくnodeに置き換えました。気にせず、むしろ野蛮なやり方をしたい場合は、最初の部分をすべて単純に置き換えることができます：

$(function(){
  // Get the elements we want to scan ( being sharper would be better )
  $('body').each(function(){
    // With no " in argument of [ndex ...]
    $(this).html( $(this).html().replace(/\[ndex\s+([^"]*?)\]/mg,'<span class="ndex-to-replace" title="$1"></span>') );
    // With no ' in argument of [ndex ...]
    //$(this).html( $(this).html().replace(/\[ndex\s+([^']*?)\]/mg,'<span class="ndex-to-replace" title='$1'></span>') );
  });

  // Make the ajax calls
  /* ... */
});
于 2012-06-30T17:29:53.363 に答える
1

私のアドバイスは、ajax 呼び出しを最小限に抑えることです。最初に検索を行い、別のラウンドですべてのオブジェクトを対応するデータに置き換えます。

$(document).ready(function() {
var pattern = /\[ndex\s+(.*?)\]/mg;
var documentText = $(document.body).text();
var matches = documentText.match(pattern);


$.ajax({ 
       url:'call.php',
       method:'POST',
       data: matches,
       success: function(data){
          //replace every matched element with the corresponding data
       });


});

ただし、これを考慮してcall.phpを変更する必要がありますが、サーバーへの多くの呼び出しを節約できるため、時間を節約できます

于 2012-06-30T16:57:06.743 に答える