JQuery के बिना निकटतम तत्व ढूँढना

Question 1

मैं jquery के बिना एक विशिष्ट टैग नाम के साथ निकटतम तत्व को खोजने की कोशिश कर रहा हूं। जब मैं एक <th>I पर क्लिक करता हूं तो मैं <tbody>उस तालिका के लिए पहुँच प्राप्त करना चाहता हूं । सुझाव? मैंने ऑफसेट के बारे में पढ़ा, लेकिन वास्तव में इसे बहुत ज्यादा नहीं समझा। क्या मुझे बस उपयोग करना चाहिए:

मान लें कि पहले से ही वें तत्व पर क्लिक किया गया है

th.offsetParent.getElementsByTagName('tbody')[0]

Question 2

थोड़ा (बहुत) पार्टी के लिए देर से, लेकिन फिर भी। यह चाल करना चाहिए :

function closest(el, selector) {
    var matchesFn;

    // find vendor prefix
    ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    })

    var parent;

    // traverse parents
    while (el) {
        parent = el.parentElement;
        if (parent && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

Question 3

बहुत आसान:

el.closest('tbody')

IE को छोड़कर सभी ब्राउज़रों पर समर्थित।
अद्यतन : एज अब इसे भी समर्थन करते हैं।

JQuery की कोई जरूरत नहीं अधिक से अधिक, jQuery की जगह के $(this).closest('tbody')साथ $(this.closest('tbody'))प्रदर्शन में वृद्धि होगी, जब तत्व नहीं मिला है।

IE के लिए पॉलीफ़िल:

if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
if (!Element.prototype.closest) Element.prototype.closest = function (selector) {
    var el = this;
    while (el) {
        if (el.matches(selector)) {
            return el;
        }
        el = el.parentElement;
    }
};

ध्यान दें कि कोई returnऐसा तत्व नहीं है जब तत्व नहीं मिला, प्रभावी रूप से वापस लौट रहा है undefinedजब निकटतम तत्व नहीं मिला।

अधिक जानकारी के लिए देखें: https://developer.mozilla.org/en-US/docs/Web/API/Element/clubest

Question 4

यहां बताया गया है कि आपको jQuery के बिना टैग नाम से निकटतम तत्व कैसे मिलता है:

function getClosest(el, tag) {
  // this is necessary since nodeName is always in upper case
  tag = tag.toUpperCase();
  do {
    if (el.nodeName === tag) {
      // tag name is found! let's return it. :)
      return el;
    }
  } while (el = el.parentNode);

  // not found :(
  return null;
}

getClosest(th, 'tbody');

Question 5

ऐसा करने के लिए एक मानकीकृत फ़ंक्शन मौजूद है: Element.closest । IE11 को छोड़कर अधिकांश ब्राउज़र इसका समर्थन करते हैं ( caniuse.com द्वारा विवरण )। MDN डॉक्स भी एक polyfill मामले में आप पुराने ब्राउज़र को लक्षित करने के लिए है शामिल हैं।

आपको tbodyदिए गए निकटतम माता-पिता को खोजने के thलिए:

th.closest('tbody');

मामले में आप स्वयं फंक्शन लिखना चाहते हैं - यहाँ मैं साथ आया हूँ:

function findClosestParent (startElement, fn) {
  var parent = startElement.parentElement;
  if (!parent) return undefined;
  return fn(parent) ? parent : findClosestParent(parent, fn);
}

टैग नाम से निकटतम माता-पिता को खोजने के लिए आप इसे इस तरह उपयोग कर सकते हैं:

findClosestParent(x, element => return element.tagName === "SECTION");

Question 6

function closest(el, sel) {
    if (el != null)
        return el.matches(sel) ? el 
            : (el.querySelector(sel) 
                || closest(el.parentNode, sel));
}

यह समाधान HTML 5 युक्ति की कुछ और हालिया विशेषताओं का उपयोग करता है, और पुराने / असंगत ब्राउज़रों पर इसका उपयोग करते हुए (पढ़ें: इंटरनेट एक्सप्लोरर) को पॉलीफिल की आवश्यकता होगी।

Element.prototype.matches = (Element.prototype.matches || Element.prototype.mozMatchesSelector 
    || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector 
    || Element.prototype.webkitMatchesSelector || Element.prototype.webkitMatchesSelector);

Question 7

@SalmanPK उत्तर का विस्तार करने के लिए

जब आप माउसओवर जैसी घटनाओं के साथ काम करते हैं, तो यह नोड को चयनकर्ता के रूप में उपयोग करने की अनुमति देगा।

function closest(el, selector) {
    if (typeof selector === 'string') {
        matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');
        while (el.parentElement) {
            if (el[matches](selector)) {
                return el
            };
            el = el.parentElement;
        }
    } else {
        while (el.parentElement) {
            if (el === selector) {
                return el
            };
            el = el.parentElement;
        }
    }

    return null;
}

Question 8

यहाँ मैं उपयोग कर रहा हूँ सरल कार्य है: -

function closest(el, selector) {
    var matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');

    while (el.parentElement) {
        if (el[matches](selector)) return el;

        el = el.parentElement;
    }

    return null;
}

Question 9

सारांश:

एक विशेष पूर्वज की खोज के लिए हम उपयोग कर सकते हैं:

Element.closest();

यह फ़ंक्शन एक CSS चयनकर्ता स्ट्रिंग को तर्क के रूप में लेता है। फिर यह वर्तमान तत्व (या तत्व का निकटतम पूर्वज) को लौटाता है जो CSS चयनकर्ता से मेल खाता है जो तर्कों में पारित किया गया था। यदि कोई पूर्वज नहीं है तो यह वापस आ जाएगाnull ।

उदाहरण:

const child = document.querySelector('.child');
// select the child

console.dir(child.closest('.parent').className);
// check if there is any ancestor called parent

<div class="parent">
  <div></div>
  <div>
    <div></div>
    <div class="child"></div>
  </div>
</div>

स्निपेट का विस्तार करें

Question 10

पेड़, जो एक वर्ग, आईडी, डेटा विशेषता, या टैग शामिल है के ऊपर निकटतम DOM तत्व प्राप्त करें। स्वयं तत्व शामिल है। IE6 पर वापस समर्थित।

var getClosest = function (elem, selector) {

    var firstChar = selector.charAt(0);

    // Get closest match
    for ( ; elem && elem !== document; elem = elem.parentNode ) {

        // If selector is a class
        if ( firstChar === '.' ) {
            if ( elem.classList.contains( selector.substr(1) ) ) {
                return elem;
            }
        }

        // If selector is an ID
        if ( firstChar === '#' ) {
            if ( elem.id === selector.substr(1) ) {
                return elem;
            }
        } 

        // If selector is a data attribute
        if ( firstChar === '[' ) {
            if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
                return elem;
            }
        }

        // If selector is a tag
        if ( elem.tagName.toLowerCase() === selector ) {
            return elem;
        }

    }

    return false;

};

var elem = document.querySelector('#some-element');
var closest = getClosest(elem, '.some-class');
var closestLink = getClosest(elem, 'a');
var closestExcludingElement = getClosest(elem.parentNode, '.some-class');

Question 11

निकटतम तत्व चाइल्डनॉड्स का पता लगाएं।

closest:function(el, selector,userMatchFn) {
var matchesFn;

// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
    if (typeof document.body[fn] == 'function') {
        matchesFn = fn;
        return true;
    }
    return false;
});
function findInChilds(el){
    if(!el) return false;
    if(el && el[matchesFn] && el[matchesFn](selector)

    && userMatchFn(el) ) return [el];
    var resultAsArr=[];
    if(el.childNodes && el.childNodes.length){
        for(var i=0;i< el.childNodes.length;i++)
        {
             var child=el.childNodes[i];
             var resultForChild=findInChilds(child);
            if(resultForChild instanceof Array){
                for(var j=0;j<resultForChild.length;j++)
                {
                    resultAsArr.push(resultForChild[j]);
                }
            } 
        }

    }
    return resultAsArr.length?resultAsArr: false;
}

var parent;
if(!userMatchFn || arguments.length==2) userMatchFn=function(){return true;}
while (el) {
    parent = el.parentElement;
    result=findInChilds(parent);
    if (result)     return result;

    el = parent;
}

return null;

}

Question 12

यहाँ।

function findNearest(el, tag) {
    while( el && el.tagName && el.tagName !== tag.toUpperCase()) {
        el = el.nextSibling;     
    } return el;
}

केवल भाई-बहनों को पेड़ के नीचे पाता है। दूसरे रास्ते पर जाने के लिए पिछली स्लाइडिंग का उपयोग करें या दोनों तरीकों को पार करने के लिए चर का उपयोग करें और जो भी पहले मिल जाए। आप सामान्य विचार प्राप्त करते हैं, लेकिन यदि आप पेरेंटनोड्स या बच्चों के माध्यम से पता लगाना चाहते हैं यदि एक भाई-बहन मेल नहीं खाते हैं तो आप jQuery का उपयोग कर सकते हैं। उस समय यह आसानी से इसके लायक है।

Question 13

पार्टी में थोड़ी देर हो गई, लेकिन जैसे-जैसे मैं गुजर रहा था और बस एक ही तरह के सवाल का जवाब दे रहा था, मैंने अपना हल छोड़ दिया - हम कह सकते हैं कि यह JQuery है closest() दृष्टिकोण है, लेकिन सादे अच्छे राजभाषा 'जावास्क्रिप्ट में।

इसे किसी भी पॉलीफ़िल की ज़रूरत नहीं है और यह पुराने ब्राउज़र है, और IE (:-)) अनुकूल है: https://stackoverflow.com/a/48726873/2816279

Question 14

मुझे लगता है कि निकटतम के साथ पकड़ने के लिए सबसे आसान कोड:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
</script>
<?php

for ($i = 1; $i <= 5; $i++) {
    echo'<div class = "division">'
        . '<form method="POST" action="">'
        . '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
        . '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
        . '</form></div>';
}
?>

बहुत धन्यवाद।