Kiểm tra xem lớp học có tồn tại ở đâu đó trong phụ huynh - vanilla JS

Question

Tôi đang thực sự đấu tranh để xem cách thực hiện việc này. Tôi muốn kiểm tra xem một lớp có tồn tại ở đâu đó trong một trong các phần tử cha của một phần tử hay không.

Tôi không muốn sử dụng bất kỳ thư viện nào, chỉ cần vani JS.

Trong các ví dụ bên dưới, nó sẽ trả về true nếu phần tử được đề cập nằm ở đâu đó trong phần tử con của một phần tử có "lớp học" làm tên lớp.

Tôi nghĩ rằng nó sẽ là một cái gì đó như thế này với jQuery:

if($('#the-element').parents().hasClass('the-class')) { 
    return true; 
} 

Vì vậy, đây trả về true:

<div> 
    <div class="the-class"> 
     <div id="the-element"></div> 
    </div> 
</div> 

Vì vậy, thực hiện điều này:

<div class="the-class"> 
    <div> 
     <div id="the-element"></div> 
    </div> 
</div> 

... nhưng điều này trả về false:

<div> 
    <div class="the-class"> 
    </div> 
    <div id="the-element"></div> 
</div> 

Answer 1

Bạn sẽ phải làm điều đó một cách đệ quy:

// returns true if the element or one of its parents has the class classname 
function hasSomeParentTheClass(element, classname) { 
    if (element.className.split(' ').indexOf(classname)>=0) return true; 
    return element.parentNode && hasSomeParentTheClass(element.parentNode, classname); 
} 

Demonstration (mở giao diện điều khiển để xem true)

Answer 2

Các fiddle

Mã

function hasClass(element, className) { 
    var regex = new RegExp('\\b' + className + '\\b'); 
    do { 
    if (regex.exec(element.className)) { 
     return true; 
    } 
    element = element.parentNode; 
    } while (element); 
    return false; 
} 

HOẶC

function hasClass(element, className) { 
    do { 
    if (element.classList && element.classList.contains(className)) { 
     return true; 
    } 
    element = element.parentNode; 
    } while (element); 
    return false; 
} 

Answer 3

Tôi tin rằng if($('#the-element').parents('.the-class').length) sẽ hiệu quả hơn, nhưng có lẽ không phải là người có thể đọc được; đó, với querySelector trong hình, có thể được thay thế bằng các phương pháp sau đây:

function hasParent(element, parentSelector) { 
    var potentialParents = document.querySelectorAll(parentSelector); 
    for(i in potentialParents) if(potentialParents[i].contains(element)) 
     return potentialParents[i]; 
    return false; 
} 

Đó sẽ cung cấp cho bạn khả năng để làm:

var elm = document.getElementById('the-element'); 
if(hasParent(elm, '.the-class')) return true; 

Answer 4

Bởi vì ID phải là duy nhất trên bối cảnh tài liệu, bạn chỉ có thể sử dụng thay vì:

return !!document.querySelector('.the-class #the-element'); 

Nếu bạn muốn bao gồm yếu tố riêng của mình, bạn có thể sử dụng:

return !!document.querySelector('.the-class #the-element, #the-element.the-class'); 

Answer 5

dụ của tôi cho Vanilla JS, đó là sử dụng một tương đương vani của parents() từ jQuery

var htmlElement = <htmlElement>, 
    parents = [], 
    classExist; 
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) { 
    parents.push(htmlElement); 
} 
classExist = (parents > 0); 

Vì vậy chọn của bạn chỉ để được một .className

Và chỉ cần kiểm tra nếu cha mẹ là> 0

Answer 6

Tôi ổn với chức năng Denys Séguret được đăng, có vẻ thanh lịch và tôi thích nó. Tôi chỉ tinh chỉnh một chút chức năng vì nếu lớp được chỉ định trong tham số, không có trong toàn bộ DOM, nó không thành công khi đệ quy đến đối tượng tài liệu vì đúng là chúng ta kiểm soát nếu phần tử có nút cha (trong dòng cuối cùng, và khi tài liệu là phần tử nút cha là null) nhưng trước khi chúng ta thực thi dòng trước đó, và khi phần tử là tài liệu, document.className là undefined và nó không thành công, do đó điều khiển phải được di chuyển lên trên cùng.

function hasSomeParentTheClass(element, classname) { 
    // 
    // If we are here we didn't find the searched class in any parents node 
    // 
    if (!element.parentNode) return false; 
    // 
    // If the current node has the class return true, otherwise we will search 
    // it in the parent node 
    // 
    if (element.className.split(' ').indexOf(classname)>=0) return true; 
    return hasSomeParentTheClass(element.parentNode, classname); 
} 

Answer 7

Bạn có thể sử dụng some và contains để đạt được các kết quả:

function hasParentWithMatchingSelector (target, className) { 
    return [...document.querySelectorAll(className)].some(el => 
    el !== target && el.contains(target) 
) 
} 

// usage 
hasParentWithMatchingSelector(myElement, '.some-class-name'); 

Answer 8

Dưới đây là một giải pháp đơn giản, đủ

if ($elem.parents('.the-class').length) { 
    return true 
}