প্রশ্নসমূহ নির্বাচনকারী তাত্ক্ষণিক শিশুদের অনুসন্ধান করুন

Question

আমার কিছু jquery- মত ফাংশন আছে:

function(elem) {
    return $('> someselector', elem);
};

প্রশ্ন আমি কীভাবে একই কাজ করতে পারি querySelector()?

সমস্যাটি >নির্বাচিত querySelector()হওয়ায় পিতামাতার স্পষ্টভাবে নির্দিষ্ট করা দরকার। কোন workaround আছে?

Comments

আমি একটি উত্তর যুক্ত করেছি যা আপনার পক্ষে আরও ভাল কাজ করতে পারে, আমাকে

— জানাবেন

Answer 1

যদিও এটি পুরো উত্তর নয়, আপনার ডাব্লু 3 সি সিলেক্টর এপিআই ভি 2 এর দিকে নজর রাখা উচিত যা আইই বাদে বেশিরভাগ ব্রাউজারে, ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই উপলব্ধ (এজ সমর্থন করে বলে মনে হচ্ছে): সম্পূর্ণ সমর্থন তালিকা দেখুন ।

function(elem) {
  return elem.querySelectorAll(':scope > someselector');
};

Comments

এটা সঠিক উত্তর. তবে ব্রাউজার সমর্থন সীমিত এবং আপনি যদি এটি ব্যবহার করতে চান তবে আপনার একটি শিম দরকার। এই উদ্দেশ্যে আমি scopedQuerySelectorSim তৈরি করেছি ।

— লিজড

বর্তমান স্পেসিফিকেশন থেকে স্কোপ বৈশিষ্ট্যটি সরানো হয়েছে ।

— তোবি

প্রকৃতপক্ষে, :scopeএখনও drafts.csswg.org/selectors-4/#the-scope-pseudo এ নির্দিষ্ট করা আছে । এখনও অবধি এটি কেবলমাত্র <style scoped>বৈশিষ্ট্য যা মুছে ফেলা হয়েছে; এটিও :scopeঅপসারণের দিকে পরিচালিত করবে কিনা তা স্পষ্ট নয় (যেহেতু <style scoped>এটি গুরুত্বপূর্ণ ব্যবহারের ক্ষেত্রে ছিল :scope)।

— জন মেলোর

কী আশ্চর্যের বিষয়: একমাত্র এজ এটি সমর্থন করে না:)

— জেনোস

Answer 2

আপনি পারবেন না। এমন কোনও নির্বাচক নেই যা আপনার সূচনার পয়েন্টটি অনুকরণ করতে পারে।

JQuery এটি যেভাবে করে (যেভাবে এমন qsaআচরণ করে যা তাদের পছন্দ মতো নয়), তারা হ'ল elemকোনও আইডি আছে কিনা তা পরীক্ষা করে দেখেন এবং যদি না হয় তবে তারা সাময়িকভাবে একটি আইডি যুক্ত করে, তারপরে একটি সম্পূর্ণ নির্বাচক স্ট্রিং তৈরি করে।

মূলত আপনি করতে:

var sel = '> someselector';
var hadId = true;
if( !elem.id ) {
    hadID = false;
    elem.id = 'some_unique_value';
}

sel = '#' + elem.id + sel;

var result = document.querySelectorAll( sel );

if( !hadId ) {
    elem.id = '';
}

এটি অবশ্যই jQuery কোড নয়, তবে যা আমি মনে করি, এটি মূলত তারা করে। শুধু এই পরিস্থিতিতে নয়, এমন কোনও পরিস্থিতিতে যেখানে আপনি নেস্টেড উপাদানটির প্রেক্ষাপট থেকে একজন নির্বাচক চালাচ্ছেন।

সিজলের জন্য উত্স কোড

Comments

লেখার সময় সঠিক, তবে একটি আপডেট পদ্ধতির জন্য @ অ্যাভিটিস্কের উত্তর দেখুন।

— lazd

Answer 3

সম্পূর্ণ: স্কোপ পলিফিল

অ্যাভেটিস্ক হিসাবে সিলেক্টর এপিআই 2 উল্লেখ করেছে :scopeসিউডো-সিলেক্টর।
সমস্ত ব্রাউজারে এই কাজটি করা (এটি সমর্থন querySelector) এখানে পলিফিল

(function(doc, proto) {
  try { // check if browser supports :scope natively
    doc.querySelector(':scope body');
  } catch (err) { // polyfill native methods if it doesn't
    ['querySelector', 'querySelectorAll'].forEach(function(method) {
      var nativ = proto[method];
      proto[method] = function(selectors) {
        if (/(^|,)\s*:scope/.test(selectors)) { // only if selectors contains :scope
          var id = this.id; // remember current element id
          this.id = 'ID_' + Date.now(); // assign new unique id
          selectors = selectors.replace(/((^|,)\s*):scope/g, '$1#' + this.id); // replace :scope with #ID
          var result = doc[method](selectors);
          this.id = id; // restore previous id
          return result;
        } else {
          return nativ.call(this, selectors); // use native code for other selectors
        }
      }
    });
  }
})(window.document, Element.prototype);

ব্যবহার

node.querySelector(':scope > someselector');
node.querySelectorAll(':scope > someselector');

---

Reasonsতিহাসিক কারণে, আমার আগের সমাধান

সমস্ত উত্তরের উপর ভিত্তি করে

// Caution! Prototype extending
Node.prototype.find = function(selector) {
    if (/(^\s*|,\s*)>/.test(selector)) {
        if (!this.id) {
            this.id = 'ID_' + new Date().getTime();
            var removeId = true;
        }
        selector = selector.replace(/(^\s*|,\s*)>/g, '$1#' + this.id + ' >');
        var result = document.querySelectorAll(selector);
        if (removeId) {
            this.id = null;
        }
        return result;
    } else {
        return this.querySelectorAll(selector);
    }
};

ব্যবহার

elem.find('> a');

Comments

Date.now()পুরানো ব্রাউজারগুলি সমর্থন করে না, এবং এর সাথে প্রতিস্থাপন করা যেতে পারেnew Date().getTime()

— ক্রিস্টোফ

Answer 4

আপনি যদি অবশেষে সরাসরি বাচ্চাদের (এবং উদাঃ নয় > div > span) সন্ধান করতে চান তবে আপনি এলিমেন্ট.ম্যাচগুলি চেষ্টা করতে পারেন :

const elem = document.body
const elems = [...elem.children].filter(e => e.matches('b'))

console.log(elems)

<a>1</a>
<b>2</b>
<b>3</b>
<b>4</b>
<s>5</s>

Answer 5

দাবি

ব্যক্তিগতভাবে আমি প্যাট্রিক ডাব্লু এর উত্তর নেব এবং তার উত্তরটি +1 করবো, আমার উত্তরটি বিকল্প সমাধান খোঁজার জন্য। আমি মনে করি না যে এটি ডাউনটা পাওয়ার যোগ্য।

এখানে আমার প্রচেষ্টা:

function q(elem){
    var nodes = elem.querySelectorAll('someSeletor');
    console.log(nodes);
    for(var i = 0; i < nodes.length; i++){
        if(nodes[i].parentNode === elem) return nodes[i];
    }
}

দেখতে http://jsfiddle.net/Lgaw5/8/

Comments

সেই নিয়ে দু'পক্ষের সমস্যা। @ বিশৃঙ্খল এটি দিয়ে কাজ করতে চায় querySelector, যার অর্থ এটি :eq()ব্যবহার করা যাবে না। এমনকি যদি এটি পারে তবে আপনার নির্বাচক তার উপাদানটি :eq()পৃষ্ঠায় প্রদর্শিত হবে :eq()যা তার পিতামাতার সূচীতে নয় (যা আপনি যেখানে পাচ্ছেন idx) তা ফিরিয়ে দেবে ।

— ব্যবহারকারী 113716

ইক () এবং ক্যোয়ারী নির্বাচনকারী সম্পর্কে +1। এবং আমার প্রসঙ্গটি যুক্ত করা উচিত $ (এলেম)। পিতা-মাতা ()।

— লিয়াংলিয়ং ঝেং

দুর্ভাগ্যক্রমে এটি কাজ করবে না। যখন নির্বাচক পিতামাতার প্রসঙ্গ থেকে চলে, তখন এটি বাম সর্বাধিক সন্তানের সাথে শুরু হয় এবং যতই গভীরভাবে বাসা বাঁধে না কেন, সমস্ত মিলিত উপাদানগুলি খুঁজে পায় finds সুতরাং এটি elemসূচক 4 এ বলুন , তবে এর আগের একটি ভাইবোন রয়েছে যা আলাদা আছে tagNameতবে এটি এর সাথে মিলের সাথে একটি উপাদানকে tagNameবাসা বেঁধেছে, যে নেস্টেড উপাদানটি আপনি টার্গেট করছেন তার আগে ফলাফলগুলিতে অন্তর্ভুক্ত হবে, আবার ছুঁড়ে ফেলবে সূচক। এখানে উদাহরণ

— ব্যবহারকারী 113716

যাইহোক, আপনি শেষ পর্যন্ত যা করছেন তা হ'ল প্রশ্নটির কোডের আরও জটিল সংস্করণ, যা কাজ করে। $('> someselector', elem);; ও)

— ব্যবহারকারী 113716

হ্যাঁ তবে আপনাকে সেই একক ইনক্রিমেন্টের হার্ড কোড দরকার ছিল। এটির পূর্বের জ্ঞানের প্রয়োজন হবে। আমি যদি অন্য অনুরূপ উপাদান যুক্ত করি তবে এটি আবার ভেঙে গেছে। ; ও) jsfiddle.net/Lgaw5/3

— ব্যবহারকারী 113716

Answer 6

আপনি যে উপাদানটি সন্ধান করছেন তার ট্যাগ নামটি যদি আপনি জানেন তবে আপনি যা চান তা অর্জন করতে আপনি এটি নির্বাচকের মধ্যে ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, আপনি একটি আছে যদি <select>আছে <option>s এবং <optgroups>, এবং আপনি শুধুমাত্র চান <option>গুলি তার আশু শিশু, ভিতরে না বেশী <optgoups>:

<select>
  <option>iPhone</option>
  <optgroup>
    <option>Nokia</option>
    <option>Blackberry</option>
  </optgroup>
</select>

সুতরাং, নির্বাচিত উপাদানটির একটি রেফারেন্স রেখে আপনি - আশ্চর্যরূপে - এর নিকটবর্তী শিশুদের এটি পেতে পারেন:

selectElement.querySelectorAll('select > option')

এটি ক্রোম, সাফারি এবং ফায়ারফক্সে কাজ করছে বলে মনে হয়, তবে আইইএসে পরীক্ষা হয়নি। = /

Comments

সতর্কতা: এই উত্তরটি আসলে সুযোগকে সীমাবদ্ধ করে না। যদি প্যাটার্নটিকে আরও নীড় স্তরের পুনরাবৃত্তি করা হয় তবে এটি সরাসরি বাচ্চাদের না হলেও এটি নির্বাচন করা হবে। <ul id="start"> <li>A</li> <li> <ul> <li>b</li> <li>c</li> </ul> </li> </ul> var result = document.getElementById('start').querySelectorAll('ul>li'); -> সমস্ত 4 লি উপাদান নির্বাচন করা হবে!

— রিসর্ড 11

খোদা না <select>একই পিতামাতার মধ্যে দুটি উপাদান ছিল ।

— টোমা জ্যাটো - মনিকা

Answer 7

কেবলমাত্র সরাসরি বাচ্চাদের উপর সিএসএস নির্বাচক কোয়েরি চালানোর জন্য নীচে একটি সরল, জেনেরিক পদ্ধতি রয়েছে - এটি সম্মিলিত প্রশ্নের জন্যও অ্যাকাউন্ট করে "foo[bar], baz.boo":

var count = 0;
function queryChildren(element, selector) {
  var id = element.id,
      guid = element.id = id || 'query_children_' + count++,
      attr = '#' + guid + ' > ',
      selector = attr + (selector + '').replace(',', ',' + attr, 'g');
  var result = element.parentNode.querySelectorAll(selector);
  if (!id) element.removeAttribute('id');
  return result;
}


*** Example Use ***

queryChildren(someElement, '.foo, .bar[xyz="123"]');

Answer 8

এখানে একটি ক্যোয়ারী-সম্পর্কিত লিব রয়েছে, যা ক্যোয়ারী-নির্বাচকের জন্য যথেষ্ট কার্যকর প্রতিস্থাপন । এটি বাচ্চাদের বাছাইকারী '> *'এবং :scope(ইনক। আই 8) পলিফিলস হিসাবে নির্বাচিতকে সাধারণকরণ করে :root। এছাড়াও এটিকে মত কিছু বিশেষ আপেক্ষিক pseudos প্রদান করে :closest, :parent, :prev, :next, ধরো যদি।

Answer 9

এটি আমার পক্ষে কাজ করেছে:

Node.prototype.search = function(selector)
{
    if (selector.indexOf('@this') != -1)
    {
        if (!this.id)
            this.id = "ID" + new Date().getTime(); 
        while (selector.indexOf('@this') != -1)
            selector = selector.replace('@this', '#' + this.id);
        return document.querySelectorAll(selector);
    } else 
        return this.querySelectorAll(selector);
};

আপনি যখন তাত্ক্ষণিক শিশুদের অনুসন্ধান করতে চান তখন আপনাকে @ এই কীওয়ার্কটি পাস করতে হবে।

Comments

বর্তমানের গ্রহণযোগ্য উত্তরের মতোই মনে হচ্ছে ... বিটিডব্লিউ, "@ এই" সিনট্যাক্সের উদ্ভট কথাটি কী? কেন কেবল ">" এর জন্য রেজিপেক্স দিয়ে পরীক্ষা করবেন না?

— অগস্ট

Answer 10

উপাদানটির আইডি রয়েছে কিনা তা পরীক্ষা করে এলোমেলো আইডি যুক্ত করুন এবং এর ভিত্তিতে অনুসন্ধান করুন

function(elem) {
      if(!elem.id)
          elem.id = Math.random().toString(36).substr(2, 10);
      return elem.querySelectorAll(elem.id + ' > someselector');
    };

হিসাবে একই জিনিস করবে

$("> someselector",$(elem))