I am trying to delete dynamically added item by clicking on delete button .delete on modal box.
I have one modal and it pops-up when I click on button <i class="fa-solid fa-ellipsis">.
Code:
function showOptions(object) {
if (object.target.matches(".fa-ellipsis")) {
let optionsModal = object.target.querySelector(".optionsModal");
optionsModal.classList.toggle("hide");
}
}
function deletePost() {
// delete specific li-item from the list
}
document.querySelector("body").addEventListener("click", showOptions(event));
document.querySelector(".delete").addEventListener("click", deletePost);
<body>
<ul class="posts-list">
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
</li>
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
</li>
<!-- every li item is added dynamically -->
</ul>
<div class="optionsModal hide">
<p class="delete">Delete</p>
<p class="cancel">Cancel</p>
</div>
</body>
And I have a problem how to pass to deletePost function specific <i class="fa-solid fa-ellipsis"> when I click on them. I was trying to nest one eventListener in another but it doesn't work.
When you open the modal, add a class to the item you clicked on. Then find the item in deletePost.
The modal isn't inside object.target, so you shouldn't use object.target.querySelector() to find it, use document.querySelector().
You shouldn't toggle the hide class when clicking on a list items. That will hide the modal if you click on a different item before cancelling the modal (although if you make it truly modal, you shouldn't be able to click on something else). I just remove the class to display the modal.
function showOptions(object) {
if (object.target.matches(".fa-ellipsis")) {
let optionsModal = document.querySelector(".optionsModal");
optionsModal.classList.remove("hide");
let oldSelected = document.querySelector(".selected");
if (oldSelected) {
oldSelected.classList.remove("selected");
}
object.target.classList.add("selected");
}
}
function deletePost() {
let selected = document.querySelector(".selected");
if (selected) {
selected.closest(".posts-list-item").remove();
}
}
document.querySelector("body").addEventListener("click", showOptions);
document.querySelector(".delete").addEventListener("click", deletePost);
.selected {
background-color: red;
}
.hide {
display: none;
}
<body>
<ul class="posts-list">
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis">Item 1</i>
</div>
</div>
</li>
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis">Item 2</i>
</div>
</div>
</li>
<!-- every li item is added dynamically -->
</ul>
<div class="optionsModal hide">
<p class="delete">Delete</p>
<p class="cancel">Cancel</p>
</div>
</body>
I'm using HTML templates, which are based on Bootstrap 4.3.1 to present my students with learning content. In the current templates, all accordion panels are closed on page load and each accordion panel can be opened regardless of how many others have also been opened.
A working example can be found on this CodePen: https://codepen.io/hagelslag1001/pen/MWGeZJr
The HTML code is as follows:
<h2>Accordion: Group of 2</h2>
<p class="small">Accordion: start copy</p>
<!-- Accordion headings should be changed to respect page hierarchy -->
<div class="accordion shadow mb-5">
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 1 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 1 of 2 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 2 content here.</p>
</div>
</div>
</div>
</div>
<p class="small">Accordion: end copy</p>
Is it possible to change this default behaviour so that only one panel can be opened at a time? (i.e. as soon as a new panel is opened, the previously opened panel will automatically close)
The Bootstrap examples use (data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne") to accomplish this for the accordions in these templates
I can't figure out how to accomplish this, since the HTML code for the accordions in these templates look different than the Bootstrap 4 examples, which use either an a or button tag to trigger the collapsible event.
Here is a simpler answer based on your CodePen: https://codepen.io/mrtcntn/pen/MWGeZdP
According the Bootstrap 4 docs, you need id="accordion" on the top level div and you don't need to give ids like id="accordion_1" and id="accordion_2".
Therefore I removed the first portion from the JS and added id="accordion" at line 18 in the HTML.
You can do this by letting javascript check for active classes and only allowing one at the time. Here's a simplified example.
// DOM here
let nav = document.querySelector(".nav");
// Handlers here
const clickHandler = function (e) {
if (e.target.classList.contains("nav__link")) {
const link = e.target;
const siblings = link.closest(".nav").querySelectorAll(".nav__link");
link.classList.toggle("active");
// removes all actives except for the clicked one
siblings.forEach((el) => {
if (el !== link) el.classList.remove("active");
});
}
};
// Listeners here
nav.addEventListener("click", clickHandler);
body {
font-family: sans-serif;
}
.nav__link {
display: block;
width: 100%;
}
.active {
background: #0f0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="nav">
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#accordeon--1">Accordeon 1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--2">Accordeon 2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--3">Accordeon 3</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--4"
>Accordeon 4</a
>
</li>
</ul>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
I have 3 movies, (Annihilation, Bomb x City and The Commuter), i don't know hot to put javascript code so when i start to search like for "ann" that only annihilation movie box appear and other not displayed...like filtering...please help i am not so good at this stuff and i want to learn.Thanks in advance.
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
Probably the best way to do this is to use js libraries as angular or react.
but here is an simple example for vanila js using oninput event:
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search..." oninput="filterMovies(this.value)">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="movies_boxes_container" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
<script>
function filterMovies(val){
val = val.toUpperCase();
let moviesBoxes = document.getElementsByClassName('moviebox');
Array.prototype.forEach.call(moviesBoxes, child => {
let id = child.id.toUpperCase()
if(!id.includes(val))
child.style.display = "none";
else{
child.style.display = "block";
}
});
}
</script>
This alternative uses the functions querySelector and querySelectorAll
to find the elements and make the necessary comparison.
This approach uses the function indexOf to find the matches.
This approach uses a class called hide to hide the elements who don't match the entered value.
This approach is case-sensitive.
Use the event input to capture any changes from your input text field.
document.getElementById('filterInput').addEventListener('input', function() {
var value = this.value;
var container = document.getElementById('boxes');
Array.prototype.forEach.call(container.querySelectorAll('.moviebox'), function(e) {
e.classList.add('hide');
Array.prototype.forEach.call(e.querySelectorAll('.namemovie'), function(m) {
if (value.trim() === '' || m.textContent.indexOf(value) !== -1) e.classList.remove('hide');
});
})
})
.hide {
display: none
}
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="namemovie">Annihilation</h3>
<p class="genremovie">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
You have to implement a Filter/Search List.
There are countless ways to solve this problem but I will put here a complete example coming from w3schools.com
Here's the relevant example, all the code (css / javascript) is embedded in a single html page for the sake of simplicity.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>
This implementation is using a for cycle to loop all the items in the list in search of the position of the characters we are searching: .indexOf(filter) and showing / hiding the current item accordingly.
A few basic concepts that combined together can achieve such a user friendly and powerful use.
As first thing I'd suggest you to separate those functional units in different files writing the parts completely and answering to any question or doubt or unclear information you read.
Write the code in the new files by hand, letter by letter.
Read it, no copy and paste.
I've preferred to put a suggestion instead of a solution because your main request seems to be that you want to learn.
Once you can disassemble / reassemble this code it will also be easy to implement it in your current page.
Take time, answer your own questions, start a course, get books, never give up.
Have fun!
Some html:
<input id='search' type='text'>
<div id='hold_movies'>
<a class='movie'>Annihilation</a><br>
<a class='movie'>Bomb x City</a><br>
<a class='movie'>The Commuter</a>
</div>
Some jQuery:
$("#search").keyup(function() {
val = $.trim(this.value);
if (val === "") {
$('.movie').show();
} else {
$('.movie').hide();
$(".movie:contains(" + val + ")").show();
}
});
Result:
To ensure the search is case-insensitive you can extend jQuery as follows:
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Here is what I came up with. this is a good little project to learn some JS! you should try doing something next where you automate the creation of the html given an array of movies. It might be a bit heavy for what you're doing, but React is a neat JS library that's worth looking into and learning about.also be careful about classnames with a . in them. You usually dont want to do that. (looking at your container class)
// grab all the movies
let movies = document.getElementsByClassName('moviebox');
//this returns an object we want an array
//with all the names in it. so lets call OBject.keys() which will
//return an array with all the keys of this object
movies = Object.keys(movies)
.map(key => movies[key].id);
// what we did was loop through the keys, (0,1,2) and index into the object with them (movies[key]). then since hte id is the name of the movie it seems, we just grab the id (movies[key].id) we then save this update array into the already defined movies array.
console.log(movies);
//^ check it out, there are the list of movies, dynamically grabbed!
//lets define a function that will hide a movie given its name.
//this is a super basic function but it does one thing well.
function hideMovie(name) {
document.getElementById(name).style.display = 'none';
console.log("hide "+name)
}
//if we can hide a movie we want to be abble to show one too.
function showMovie(name) {
document.getElementById(name).style.display = 'block';
}
//now lets target the input box
const searchBox = document.getElementById('filterInput');
//we want to add an event listener so everytime the user inputs something
//we look through the movies and hide the ones that dont contain the string
//entered, we also want to make sure we show the right movies too
searchBox.addEventListener('input', () => {
const value = searchBox.value;
const visibleMovies = [];
console.log(value)
//lets filter the movies to only include the ones we want to hide
const hiddenMovies = movies.filter(movie => {
const hidden = movie.indexOf(value) < 0;
//if we're not going to hide it lets show it.
if(!hidden){
visibleMovies.push(movie)
}
return hidden;
});
console.log(hiddenMovies)
//loop through and hide the movies.
for(let i = 0; i< hiddenMovies.length; i++){
hideMovie(hiddenMovies[i]);
}
//loop through and show the movies
for(let i = 0; i< visibleMovies.length; i++){
showMovie(visibleMovies[i]);
}
})
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
I would add the attribute onkeyup to your input element and set it equal to a function that looks at the input text, and then loops through your moviebox div elements and hides them if the h3 element text does not contain the input value.
Example:
<input type="text" id="filterInput" placeholder="Search..." onkeyup="filterTable(this)" />
function filterTable(input) {
var search = input.value;
var movieDivs = document.querySelectorAll('div.moviebox');
for (var i = 0; i < movieDivs.length; i++;) {
var h3 = movieDivs[i].querySelector('h3');
if (h3.innerText.indexOf(search) >= 0)
movieDivs[i].style.display = '';
else
movieDivs[i].style.display = 'none';
}
}
This is the html for the my ul,and on click of anchor tag data will be loaded from the other file tab2.html .
<ul class="list-unstyled " id="dist-tabs">
<li class="col-xs-3 student item ">
<a href="./tabs/tab2.html #1">
shimla
</a>
</li>
<li class="col-xs-3 staff item">
<a href="./tabs/tab2.html #2">
dharamshala
</a>
</li>
</ul>
<div id="dist-container">
</div>
Following is the content for the tab2.html , which will be loaded through ajax.
<div class="popup-overlay" id="1">
<div class="popup-box">
<h4>Name 1</h4>
<span class="close-btn">x close</span>
</div>
</div>
<div class="popup-overlay" id="2">
<div class="popup-box">
<h4>Name 2</h4>
<span class="close-btn">x close</span>
</div>
</div>
Every thing is working fine, popup opens just fine. But on click of close button with class="close-btn", the popup-box doesn't close
Following is the js i am using for the purpose stated above .
var containerId = '#dist-container';
var tabsId = '#dist-tabs';
$(document).ready(function(){
$(tabsId + ' A').click(function(){
loadTab($(this));
return false;
});
});
function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');
$(containerId).load(tabObj.attr('href'), function(){
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
$(".close-btn").click(function(){
$(containerId).fadeOut('fast');
});
}
I have tried a lot of code for popup through ajax but not successful so far. So please help me out
I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.
The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?
E.g (the menuli a segment)
$(document).ready( function() {
$(menuli).each( function(index) {
$itemnumber = $(menuli a).attr("href");
switch($itemnumber) {
case 1:
$(this).css("background-image", "image01.jpg");
break;
}
});
});
This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.
EDIT
Here is my html:
<div id="divMenuSportGSXSports">
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=468&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&Antepost=0">
<span title="SOCCER">SOCCER</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=520&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&Antepost=0">
<span title="BASEBALL">BASEBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=544&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&Antepost=0">
<span title="CRICKET">CRICKET</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=525&Antepost=0&Tema=Supabets)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&Antepost=0">
<span title="BASKETBALL">BASKETBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=534&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&Antepost=0">
<span title="ICE HOCKEY">ICE HOCKEY</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=523&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&Antepost=0">
<span title="TENNIS">TENNIS</span>
</a>
</div>
</div>
</div>
Yes you can, use find
var parentElement = $('#someElement');
var childElement = parentElement.find('.child'); //where .child should be your child selector
Where as example code is not clear, I just gave answer to your question.
try to change this:
$(this).css("background-image", "image01.jpg");
to this:
$(this).children("div").css("background-image", "image01.jpg");
If you want to target the direct child of the element, better to use children() than find()
Please refer to this: What is fastest children() or find() in jQuery?