JQuery olmadan en yakın öğeyi bulma

Jquery olmadan belirli bir etiket adıyla en yakın öğeyi bulmaya çalışıyorum. Bir üzerine tıkladığımda, o tabloya <th>erişmek istiyorum <tbody>. Öneriler? Ofset hakkında okudum ama pek anlamadım. Sadece kullanmalı mıyım:

Bunun zaten tıklanan öğeye ayarlandığını varsayın

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

Partiye biraz (çok) geç, ama yine de. Bu hile yapmalı :

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

Çok basit:

el.closest('tbody')

IE dışındaki tüm tarayıcılarda desteklenir.
GÜNCELLEME : Edge şimdi de destekliyor.

JQuery'ye gerek yok. Dahası, jQuery'leri $(this).closest('tbody')ile değiştirmek $(this.closest('tbody')), öğe bulunmadığında performansı önemli ölçüde artıracaktır.

IE için Polyfill:

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

Unutmayın ki returnöğe bulunmadığında, undefineden yakın öğe bulunamadığında etkin bir şekilde geri döner.

Daha fazla ayrıntı için bkz: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

JQuery olmadan etiket adına göre en yakın öğeyi şu şekilde elde edersiniz:

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

Bunu yapmak için standartlaştırılmış bir işlev vardır: Element.closest . IE11 dışındaki çoğu tarayıcı bunu destekler ( ayrıntılar caniuse.com ). MDN dokümanlar da eski tarayıcıları hedef sahip durumda bir polyfill sayılabilir.

En yakını bulmak için tbody ebeveynith şunları yapabilirsiniz:

th.closest('tbody');

Fonksiyonu kendiniz yazmak istemeniz durumunda - işte ortaya çıkardığım şey:

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

En yakın ebeveyni etiket adına göre bulmak için bunu şu şekilde kullanabilirsiniz:

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

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

Bu çözüm, HTML 5 spesifikasyonunun daha yeni özelliklerinden bazılarını kullanır ve bunu daha eski / uyumsuz tarayıcılarda (okuyun: Internet Explorer) kullanmak bir çoklu doldurma gerektirir.

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

@SalmanPK yanıtını genişletmek için

düğümü seçici olarak kullanmanıza izin verir, fareyle üzerine gelme gibi olaylarla çalışırken yararlıdır.

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

İşte kullandığım basit işlev: -

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

Özet:

Belirli bir atayı bulmak için şunları kullanabiliriz:

Element.closest();

Bu işlev, bağımsız değişken olarak bir CSS seçici dizesi alır. daha sonra, bağımsız değişkenlerde iletilen CSS seçiciyle eşleşen geçerli öğenin (veya öğenin kendisinin) en yakın üst öğesini döndürür. Eğer ata yoksa geri dönecektir null.

Misal:

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>

Ağaçta bir sınıf, kimlik, veri özelliği veya etiket içeren en yakın DOM öğesini alın. Öğenin kendisini içerir. IE6'ya geri desteklenir.

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

En yakın Elements childNodes'unu bulun.

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;

}

Buraya.

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

Sadece ağacın aşağısında kardeşleri bulur. Diğer yöne gitmek için previousSibling'i kullanın Veya her iki yolu da geçmek ve hangisi önce bulunursa geri dönmek için değişkenleri kullanın. Genel fikri anlıyorsunuz, ancak bir kardeş eşleşmiyorsa parentNodes veya çocuklarda gezinmek istiyorsanız jQuery'yi de kullanabilirsiniz. Bu noktada kolayca buna değer.

Partiye biraz geç kaldım, ama oradan geçerken ve çok benzer bir soruyu yanıtlarken, buraya çözümümü bırakıyorum - bunun JQuery closest()yaklaşımı olduğunu söyleyebiliriz , ancak çok iyi JavaScript.

Herhangi bir pollyfill'e ihtiyaç duymaz ve daha eski tarayıcılara sahiptir ve IE (:-)) dostu: https://stackoverflow.com/a/48726873/2816279

Bence en yakın jquery ile yakalamak için en kolay kod:

<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>';
}
?>

Çok teşekkürler.