2016-05-10 3 views
0

Я просто очутился от странного поведения JavaScript/jQuery в простой функции, которую я написал, чтобы найти родительский элемент по имени класса. Функция кажется довольно простой, поскольку она проверяет класс на элементе, если он его не находит, он вызывает ту же функцию с родительским элементом ... пока не найдет класс.Родительский элемент рекурсивного поиска jQuery для класса

Вот соответствующий JSFiddle, https://jsfiddle.net/xxvywa4v/.


Учитывая следующий HTML:

<div class="outer"> 
    <div class="inner"> 
    <div class="innermost">Click Me</div> 
    </div> 
</div> 

и следующий JavaScript:

function getParentByClass($el, className) { 
    if ($el.hasClass(className)) { 
    console.log('found element!', $el); // returns correct element 
    return $el; 
    } else { 
    getParentByClass($el.parent(), className); 
    } 
} 

$('.innermost').on('click', function(e) { 
    var $outerEl = getParentByClass($(e.target), 'outer'); 

    console.info($outerEl); // undefined 
}); 

Почему элемент правильно вошел и обнаружил в getElementByClass, но возвращается в обработчик щелчка как undefined?

(Примечание: Я не заинтересован в альтернативных способах воспроизвести эту функциональность, а почему он не работает в этой конкретной реализации)

+0

Не JQuery уже есть это '.parents() '? – Quantastical

+0

@Quantastical говорит, что он просто хочет знать, почему его реализация не работает – juvian

ответ

1

Небольшой ошибка, вы на самом деле не возвращаетесь, что вы нашли в рекурсия. Вы возвращаетесь, когда вы найдете его, но не кипящий его вернуть, что:

} else { 
    getParentByClass($el.parent(), className); 
} 

Вам нужно положить возвращение туда же: return getParentByClass($el.parent(), className);

+0

Спасибо! Полностью игнорируется возвращение этого результата рекурсии. – Himmel

Смежные вопросы