How to get element by class name using jQuery in Lightning Web Component

Question

I am able to load the jQuery library, but it seems that I can't call some simple jQuery function:

window.jQuery('.classText').attr('id');

I am trying to get element id by finding the element by class name. Using above script I always get undefined. But using online playground like jsfiddle, I am able to get the element id

Here is the detail of my js and html file

ItemToApprove.js:

import { LightningElement, track } from 'lwc';
import { loadScript,loadStyle } from 'lightning/platformResourceLoader';

import jqueryPkg from '@salesforce/resourceUrl/jquerypackage';

export default class ItemToApprove extends LightningElement {
    @track error;

    dataTablejsInitialized = false;

    renderedCallback() {
        if (this.dataTablejsInitialized) {
            return;
        }
        this.dataTablejsInitialized = true;

        loadScript(this, jqueryPkg +'/jQuery-3.3.1/jquery-3.3.1.js')
        .then(() => {
            this.error = undefined;

            //calling the jquery function
            this.initializeTable();
        })
        .catch(error => {
            this.error = error;
        });
    }

    initializeTable() {
        //always getting undefined instead of printing the element id
        alert(window.jQuery('.classText').attr('id')); 
    }
}

ItemToApprove.html:

<template>
    <lightning-card title="Item to Approve" icon-name="action:new_task">
        <div class="slds-m-around_medium">
            <input id="txtTest" class="classText" type="text" value="test" />
        </div>
    </lightning-card>
</template>

Basically I want to get the element using jQuery function by element class name. How can I achieve this in LWC?

Answer 1

If you want to use jquery (or any 3rd party JS library), it is better to pass the native lightning selector to jquery - without which there is a chance you will run into problems with any of upgrades. In your case, you can use this.template.querySelector('.classText'). Below code will work:

window.jQuery(this.template.querySelector('.classText')).attr('id');

Below is full code:

renderedCallback() {
    if (this.dataTablejsInitialized) {
        return;
    }
    this.dataTablejsInitialized = true;

    loadScript(this, jqueryPkg + '/jQuery-3.3.1/jquery-3.3.1.js')
        .then(() => {
            this.error = undefined;

            //calling the jquery function
            this.initializeTable();
        })
        .catch(error => {
            this.error = error;
        });
}
initializeTable() {
    console.log('classText id => ', window.jQuery(this.template.querySelector('.classText')).attr('id'));
}

However, note that id will be modified at RUNTIME.

Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.

So, the id you get will be something like txtTest-101