I have 2 classes parent/child. In the parent class I need a way to return/find the child class from the clicked on element.
I am getting: 'find(...).toggle is not a function'
Here in a minimal example:
class card {
constructor(parent, element) {
this.parent = parent;
this.element = element;
}
toggle(expand) {
//Do stuff
}
}
class cards {
constructor() {
this.element = $(".cards");
this.cards = [];
this.element.children(".card").each((obj, el) => {
console.log(el);
this.cards.push(new card(this, $(el)));
});
$(document).click((event) => {
var clickedOn = $(event.target);
var $thisClosest = clickedOn.closest(".card");
find($thisClosest).toggle();
});
}
find(element) {
this.cards.forEach((obj, el) => {
if ($(el) == element)
return obj; // need to return the class card
});
};
}
var my_a = new cards();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="cards">
one asdf
<div class="card">card 1 asdf</div>
<div class="card">card 2 asdf</div>
</div>You should use this.cards.find instead of this.cards.forEach as Array.forEach does not return any value.
Array.find will return first element from array that matches the condition.
find(element) {
return this.cards.find((card) => card.element.is(element)));
};
I also used jQuery's .is() as a more robust way to compare elements.