+ 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, 
sfdcMonkey.comsfdcMonkey.com
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 

dempCmp
<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
    </div>
</aura:component>
demoCmpcontroller
 
({
    doInit:function(cmp,evt,helper){
        console.log('setting bg:::')
        var el = component.find('testDiv').getElement();
        $(el).css('background-color', 'blue');
        console.log('done setting bg:::')
    }
})


Thanks 

Mark it best answer if it helps you 
:)