无法在元素内获取字符串-对象文字javascript

Question

I'm trying to to get the strings of two divs .class-date and .class-time but i'm getting an Uncaught TypeError "e.siblings is not a function". This probably a rudimentary mistake but I can't work it out. Any pointers in the right direction would be greatly appreciated .

 var Cc = { init: function() { Cc.bindEvent(); }, bindEvent: function() { $('.book-class').on("click", function() { let selectedclass = this; Cc.parseClass(selectedclass); }); }, parseClass: function(selectedclass) { let classdate = selectedclass.siblings('.class-date').text(); let classtime = selectedclass.siblings('.class-time').text(); console.log(classdate, classtime); } } jQuery(document).ready(function($) { Cc.init(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="class"> <div class="class-date">Thursday, 1 January</div> <div class="class-time">18:00 — 20:00</div> <div class="book-class">Book Class</div> </div> 

Answer 1

Inside the click callback function, this is a HTMLElement and you're treating it like a jQuery object.

Change let selectedclass = this; to let selectedclass = $(this);

Answer 2

this is not a jQuery object. It is the DOM object of the clicked item.

Use $(this) and to make it even clearer, add a $ on the vars to show you expect and process a jQuery object

 var Cc = { init: function() { Cc.bindEvent(); }, bindEvent: function() { $('.book-class').on("click", function() { let $selectedclass = $(this); Cc.parseClass($selectedclass); }); }, parseClass: function($selectedclass) { let classdate = $selectedclass.siblings('.class-date').text(); let classtime = $selectedclass.siblings('.class-time').text(); console.log(classdate, classtime); } } $(function() { Cc.init(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="class"> <div class="class-date">Thursday, 1 January</div> <div class="class-time">18:00 — 20:00</div> <div class="book-class">Book Class</div> </div> 

Answer 3

You could also skip the anonymous function in bindEvent click handler and pass CC.parseClass as reference instead. It will change the context of this inside parseClass to the element the event occurred on which may or may not be confusing regarding using this

var Cc = {
    init: function() {
        Cc.bindEvent();
    },
    bindEvent: function() {
        $('.book-class').on("click", Cc.parseClass);
    },
    parseClass: function(event) {
        // `this` is element from event handler
        let $selectedclass = $(this);
        let classdate = $selectedclass.siblings('.class-date').text();
        let classtime = $selectedclass.siblings('.class-time').text();
        console.log(classdate, classtime);
    }
}

$(function() {
    Cc.init();
});