+ Start a Discussion
Anita 8Anita 8 

Why jquery .next() and prev() is not working on lightning component

Hello all guys, 

I'm trying to use .next() and .prev() for hide and show " tr " or " td " , but in lightning design system is not supporting with this method .
if (typeof hidden != 'boolean') hidden = false;
	$j("#columnSourceType-col").closest('tr').toggleClass("hidden", hidden);
	$("#native_data_type-col").closest('tr').toggleClass("hidden", hidden);
	$j("#mainSourceName-col").closest('tr').toggleClass("hidden", hidden);
	$j("#mainSourceName-col").closest('tr').next(".rowspliter").toggleClass("hidden", hidden);

	$("#editeValueOperatorDropdown").closest('tr').prev(".rowspliter").toggleClass("hidden", hidden);
	$("#editeValueOperatorDropdown").closest('td').prev("td").toggleClass("hidden", hidden);
	$("#editeValueOperatorDropdown").closest('td').toggleClass("hidden", hidden);
So how to fix it ??
 Please, help me ! 

Thanks for advance, 
hi Anita 
As a workaround to do DOM manipulation using  libraries for now,we need to use afterScriptsLoaded method only(which makes sures the libraries are available).
so make sure your jquery libraries upload successfully.

here is a sample code 

<aura:component implements="force:appHostable" access="public">
    <ltng:require scripts="/resource/yourJqueryfile.js"  afterScriptsLoaded="{!c.doInit}" />

    <div aura:id="testDiv" style="height:100px;">
        test div txt
        console.log('setting bg:::')
        var el = component.find('testDiv').getElement();
        $(el).css('background-color', 'blue');
        console.log('done setting bg:::')


Mark it best answer if it helps you