I am trying to access and style the different objects inside a jQuery object by using .get(); and I have been successful in simply accessing the individual objects but unable to perform operations like adding css or classes to those individual elements. I also tried to use [] to access and style; but access is again a success while I am not being able to style that selected element. Why is this happening?
my script using .get() =>
$(()=>{
$('button').click(function(event){
$(".box div").get(1).toggleClass('color');
});
});.box{
font-size: 0px;
width: min-content;
}
.color{
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
border: 1px solid white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<button>click</button>TypeError: $(...).get(...).toggleClass is not a function
Why is this message coming? How to resolve this and get specific index element from a jQuery Object?
i hope this helps you.
$(()=>{
$('button').click(function(event){
$(".box div:nth-child(1)").toggleClass('color');
});
});.box{
font-size: 0px;
width: min-content;
}
.color{
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
border: 1px solid white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<button>click</button>