تحويل محدد JQSS CSS معقدة إلى سياق للتخزين المؤقت

StackOverflow https://stackoverflow.com/questions/977185

  •  13-09-2019
  •  | 
  •  

سؤال

بعد ردود الفعل، أعد كتابة السؤال الكامل.

لدي العلامة التالية:

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

أفعل ذلك حتى أتمكن من الحصول على كل محتوى الجسم باستثناء DIV مع معرف "DO-not-modify-Me".

الآن، دعنا نقول أنني أرغب في بناء وظيفة تدع مبرمج آخر لاختيار أي شيء في الجسم، تماما مثل تحديد مع 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 أنا.

لا يعمل رمز الاختبار، لأنه حاليا، يتم تطبيق 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 - أنا تتحول إلى أحمر.

كيف تحصل على النتيجة في رمز نتيجة الاختبار؟ يمكنك تعديل أي جزء من التعليمات البرمجية.

هل كانت مفيدة؟

المحلول

أزلت كل التعديل السابق لأنها لم تعد ذات صلة، يمكنك قراءتها في سجل تحرير.
Edit3.
أساسا المشكلة هي أنه لا يمكنك مخبأ المحدد. هذا لأن الدالة $ () تعود كائنات مطابقة، وليس الكائنات غير المتطابقة. هذا يعني أن استخدام محدد مخز مؤقت سيعني أن ذاكرة التخزين المؤقت يمكن أن يخرج من المزامنة مع دوم الحقيقي. أي في هذه الصفحة البسيطة:

<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>

لذلك عليك إعادة الاختيار في كل مرة، bassicly لديك خياران هنا: 

//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') );
}

نصائح أخرى

قلت أن القانون يمكن تعديله بأي شكل من الأشكال، أليس كذلك؟ لماذا لا تفكر في الأمر كما تفعل فعل تريد البحث بدلا من ما أنت لا تريد البحث. ضع بقية الرمز في <div> واستخدام ذلك فقط كما السياق. لن يفوز بأي جوائز أناقة ولكنها بسيطة ويتحصل على الوظيفةتيم.

أنا متأكد من أنه يمكنك فقط استخدام "السياق" مباشرة، مثل ذلك:

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

بعد قراءة التفسير الموسع سأحاول رصاصي:

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;

للوصول إلى رقم العنصر الأول في المجموعة التي يمكنك استخدامها:

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 كاملة مع وظيفة اختيار، وربما تحتاج إلى التفكير في الاستخدام محلل xpath dom..

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top