I posted a problem (How to order list items by simple hierarchy in page); the answer responded to the question but only because my sample wasn't sufficiently complex.
I need to find the index of an element compared to a very high parent or maybe the entire page. Could be the index in comparison to the entire dom.
The code there not working because index() always returns 0 (if control are not in the same parent)
https://jsfiddle.net/6ztqckqa/3/
$(function() {
//reorder errorList,
$('#errorList a').sort(function(a, b) {
var data1 = $(a).data('idcontrol'),
data2 = $(b).data('idcontrol'),
index1 = $('#' + data1).index(),
index2 = $('#' + data2).index();
return index1 - index2;
}).appendTo('#errorList');
});
HTML:
<h3>The original list or errors.</h3>
<div id="errorListOriginal">
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list3">error list3</a>
<a data-idcontrol="textbox1">error textbox1</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list1">error list1</a>
</div>
<h3>The list or errors reordered.</h3>
<div id="errorList">
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list3">error list3</a>
<a data-idcontrol="textbox1">error textbox1</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list1">error list1</a>
</div>
<h3>What should be the list of errors after been reordered.</h3>
<div id="errorListShouldBeAfterReorderOnLoad">
<a data-idcontrol="textbox1">error textbox1</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list1">error list1</a>
<a data-idcontrol="list3">error list3</a>
</div>
<h3>Elements in the page</h3>
<div>
<div>
<input type="text" id="textbox1" />
</div>
<div>
<div>
<div>
<div>
<div>
<input type="text" id="textbox2" />
</div>
</div>
</div>
<div>
<select id="list1">
<option>item1</option>
</select>
</div>
</div>
</div>
<div>
<div>
<div>
<input type="text" id="textbox3" />
</div>
<select id="list2">
<option>item1</option>
</select>
</div>
</div>
<div>
<select id="list3">
<option>item1</option>
</select>
</div>
</div>
Is there a way to use z-index?
At least some of your stack of nested divs should have classes on them indicating their purpose. Elements of the same class should be at the same level in the DOM tree so that you can select them and get their indexes.
Otherwise, apply a class or an ID to the top-level parent and target its children.
The bottom line is that clean, semantic markup is key.
I used brute force base on Is element before or after another element in DOM
here on fiddle http://jsfiddle.net/6ztqckqa/5
$(function() {
//reorder errorList,
$('#errorList a').sort(function(a, b) {
var data1 = $(a).data('idcontrol'),
data2 = $(b).data('idcontrol');
var all = $('input, select');
var index1 = all.index($("#" + data1));
var index2 = all.index($("#" + data2));
return index1 - index2;
}).appendTo('#errorList');
});
Related
I'm having difficulty writing the document.querySelector for the following code. Currently I've written this code as querySelector but it does not encompass everything...
Please help me improve this, thank you.
Edit: as there seemed to be some confusion, let me elaborate. I would like all the elements, from div, a, img, everything to be encompassed in the querySelector.
var areaa = document.querySelector("#menu #envelope #links");
<div id="menu">Click here to browse the internet.
<div id="envelope">
<div id="links" >
<div>
<a id="g" class="redirect">
<img id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
</div>
Edit 2 - as more code was required (the href elements are removed / added as needed)...
var menu = document.getElementById("menu");
var areaa = document.querySelectorAll(".areaa");
menu.addEventListener("mouseenter", addHref);
//areaa.addEventListener("mouseleave", remHref);
document.addEventListener("mousemove", function(){
if(this != areaa){
remHref();
}
});
menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
if (this != areaa){
remHref();
}
});
var g = document.getElementById("g");
var s = document.getElementById("s");
function remHref (){
if (g.hasAttribute("href")){
g.removeAttribute("href");
}
if (s.hasAttribute("href")){
s.removeAttribute("href");
}
}
function addHref (){
setTimeout(activate, 250);
}
function activate (){
document.getElementById("g").setAttribute("href", "https://www.google.com");
document.getElementById("s").setAttribute("href", "https://www.example.com");
}
you might want to add a class to all elements you want to be captured, then use document.querySelectorAll
var areaa = document.querySelectorAll(".my-class");
html shoud look like this:
<div id="menu" class="my-class">Click here to browse the internet.
<div id="envelope" class="my-class">
<div id="links" class="my-class">
<div>
<a id="g" class="redirect">
<img class="my-class" id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
If you want to select everything you can use the below:
var areaa = document.querySelectorAll("#menu #envelope #links *");
If you want to be more specific you can do the following (the code below will select all of the anchor tags and images inside #links):
var areaa = document.querySelectorAll("#menu #envelope #links a, #menu #envelope #links img");
You can use querySelectorAll
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
You can use it like this:
var areaa = document.querySelectorAll('*');
This will return all items.
You can replace document with the container if you want to restrict this to a specific div.
2 things, either add a class to every div
<div id="menu" class="area">Click here to browse the internet.
<div id="envelope" class="area">
<div id="links" class="area" >
<div>
<a id="g" class="redirect">
<img id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
</div>
and select all divs by
let areaa = getElementsByClassName("area");
or you can use document.querySelectorAll("yourclassname") to access all divs of that class name
I am creating an election application that will require switching elements in a list. I have the following Custom Element Web Components. I have trimmed the irrelevant functions from the class for brevity.
// Position
// ---------------------------------------
class Position extends HTMLElement {
constructor(title) {
super();
this.title = title
}
connectedCallback() {
this.className = "portlet";
// Copy the HTML template
var template = document.querySelector("#template-e-position");
this.appendChild(document.importNode(template.content, true));
// Create the title tag
var title = this.querySelector(".title");
title.innerHTML = this.title;
// Create event listener for swap links
this.querySelector(".moveUp").addEventListener("click", function(e) {
swapWithPrevSibling(that);
});
this.querySelector(".moveDown").addEventListener("click", function(e) {
swapWithNextSibling(that);
});
}
}
customElements.define('e-position', Position);
// Candidate
// ---------------------------------------
class Candidate extends HTMLElement {
constructor(name) {
super();
this.name = name;
}
connectedCallback() {
// Copy the HTML template
var template = document.querySelector("#template-e-candidate");
this.appendChild(document.importNode(template.content, true));
// Create the title tag
var name = this.querySelector(".name");
name.innerHTML = this.name;
// Create event listener for delete link
var a = this.querySelector("a.delete");
var that = this;
a.addEventListener('click', function(e) { return that.delete(e) }, false);
}
delete(event) {
deleteNode(this);
}
}
customElements.define('e-candidate', Candidate);
I have the swap functions:
function swapWithPrevSibling (elm) {
elm.parentNode.insertBefore(elm,elm.previousSibling)
}
function swapWithNextSibling (elm) {
elm.parentNode.insertBefore(elm.nextSibling,elm)
}
I use the following template to build the Custom Elements:
<template id="template-e-position">
<div class="header">
<span class="title"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
</div>
<form class="add-candidate">
<input type="text" />
<input type="submit" value="Add candidate">
</form>
</template>
<template id="template-e-candidate">
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</template>
Since I create the Custom Elements from the HTML templates, I need to clone the templates in the connectedCallback() (since adding children in the constructor is disallowed in v1). The result of this is when I call the swap function to the "positions" in the list, it ends up re-cloning the template and adding in unnecessary DOM elements to both Position and Candidate elements.
For example, the result after swapping should be:
<e-position title="Vice-President" class="portlet">
<div class="header">
<span class="title">Vice-President</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
<e-candidate>
<span class="name">Evan</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
<e-candidate>
<span class="name">Steph</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
</e-position>
But it ends up being a jumbled:
<e-position title="Vice-President" class="portlet">
<div class="header">
<span class="title">Vice-President</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
<e-candidate>
<span class="name">Evan</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate><e-candidate>
<span class="name">Steph</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
<div class="header">
<span class="title"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
</e-position>
Is there a better way to clone the HTML templates so that I don't need to add elements in the connectedCallback? If not, how can I efficiently swap without bringing along all the extra elements? Note that I do not want to use jQuery as I want a lightweight application.
I have seen this and it doesn't work because it ends up calling the connectedCallback and inserting How to swap DOM child nodes in JavaScript?
There are several solutions:
You can use a flag to see if it's the first time the callback is called, and insert the template only if the flag is not set yet.
customElements.define('e-candidate', class extends HTMLElement {
connectedCallback() {
if (!this.init) {
var template = document.querySelector('#template-e-candidate')
this.appendChild(template.content.cloneNode(true))
this.querySelector('.moveUp')
.onclick = () =>
this.previousElementSibling && this.parentElement.insertBefore(this, this.previousElementSibling)
this.init = true
}
}
})
e-candidate { display:block }
<template id="template-e-candidate">
<slot></slot>
<button class="moveUp">↑</button>
</template>
<e-candidate>First</e-candidate>
<e-candidate>Second</e-candidate>
You can use CSS flexbox with CSS order property to change the order of the elements without using insertBefore().
In a hidden list I have a variable list with this data (in this example www.domain.com/2009 is the current URL):
<ul id="WalkingYears" style="visibility: hidden; display:none;">
<li id="Walk2011"><img src="some-imga.jpg"></li>
<li id="Walk2010"><img src="some-imgs.jpg"></li>
<li id="Walk2008"><img src="some-imgf.jpg"></li>
<li id="Walk2007"><img src="some-imgg.jpg"></li>
<li id="Walk2006"><img src="some-imgh.jpg"></li>
<li id="Walk2005"><img src="some-imgj.jpg"></li>
<li id="Walk2004"><img src="some-imgk.jpg"></li>
<li id="Walk2003"><img src="some-imgl.jpg"></li>
<li id="Walk2002"><img src="some-imgz.jpg"></li>
<li id="Walk2001"><img src="some-imgx.jpg"></li>
</ul>
The above list is auto-generated and I can change this if I like; for example into:
<div id="Walk2011" data-target="http://domain.com/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/2001" data-img="some-imgz.jpg" data-title="2001"></div>
You see that the current URL (www.domain.com/2009) is not showing in this list.
Now I'd like to fill the prev and next navigation, based on the current url, using the values mentioned above (title, href, image src):
<a href="http://domain.com/2008" title="2008" id="balk-prev-btn" class="prev-btn left">
<img src="some-imgd.jpg" alt="2008">
<span class="icon"></span>
</a>
<a href="http://domain.com/2010" title="2010" id="balk-next-btn" class="next-btn right">
<img src="some-imgs.jpg" alt="2010">
<span class="icon"></span>
</a>
I guess I need to
first find out what the current URL is
then compare it to the data in the list
somehow point out the prev and next page
Also when having selected a certain variable (the name of a walker) the links in the list will be different and the URL will be www.domain.com/walkername/2009:
<div id="Walk2011" data-target="http://domain.com/walkername/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/walkername/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/didnotwalk/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/didnotwalk/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/walkername/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/didnotwalk/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/didnotwalk/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/walkername/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/didnotwalk/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/didnotwalk/2001" data-img="some-imgz.jpg" data-title="2001"></div>
In this case the prev and next button should only show the links with the walker name in it :) and should look like this:
<a href="http://domain.com/walkername/2006" title="2006" id="balk-prev-btn" class="prev-btn left">
<img src="some-imgg.jpg" alt="2006">
<span class="icon"></span>
</a>
<a href="http://domain.com/walkername/2010" title="2010" id="balk-next-btn" class="next-btn right">
<img src="some-imgs.jpg" alt="2010">
<span class="icon"></span>
</a>
Can someone help me?
tnx!
Okay so if you have this layout, this script should do the job
<div id="Walk2011" data-target="http://domain.com/walkername/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/walkername/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/didnotwalk/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/didnotwalk/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/walkername/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/didnotwalk/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/didnotwalk/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/walkername/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/didnotwalk/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/didnotwalk/2001" data-img="some-imgz.jpg" data-title="2001"></div>
jQuery based script:
var xlocation = "http://www.domain.com/walkername/2009".match(/(\/[a-zA-Z]+\/)(\d+)/); //sorry for ugly regexp --> ["/walkername/2009", "/walkername/", "2009"], also here should be used window.location.href , but for example lets use static string;
//find and filter only links which have 'walkername' in data-tagert
$el = $('#WalkingYears div[id^=Walk]').filter(function(i,el){
return $(el).attr('data-target').indexOf(xlocation[1]) > 0;
}),
//sort if divs is scrambeled
$elSorted = $el.sort(sorter);
prev = jQuery.grep($elSorted,function(el,i){
return $(el).attr('data-title').replace(/^\D+/g, '')*1<xlocation[2]*1
})
next = jQuery.grep($elSorted,function(el,i){
return $(el).attr('data-title').replace(/^\D+/g, '')*1>xlocation[2]*1
})
var sorter = function(a,b){
var a = $(a).attr('data-title').replace(/^\D+/g, '')*1,
b = $(b).attr('data-title').replace(/^\D+/g, '')*1
return b-a
}
//ADD href to buttons...
$('#balk-prev-btn').prop('href',$(prev).first().attr('data-target'))
$('#balk-next-btn').prop('href',$(next).last().attr('data-target'))
You`ll need to check if prevEl and NextEl still exists in case if current page is first or last. Also you will need to review regexp used for parsing url :)
I got a list of link (error message) pointing to a control into a page.
The order of links is not the same as the control there pointing to.
I want to reorder my links.
sample :
$(function() {
//reorder errorList,
// getOrder(idcontrol){???}
});
input, select,a {
display:table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>The original list or errors.</h3>
<div id="errorList">
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list3">error list3</a>
<a data-idcontrol="textbox1">error textbox1</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list1">error list1</a>
</div>
<h3>Elements in the page</h3>
<input type="text" id="textbox1"/>
<input type="text" id="textbox2"/>
<select id="list1"><option>item1</option></select>
<input type="text" id="textbox3"/>
<select id="list2"><option>item1</option></select>
<select id="list3"><option>item1</option></select>
<h3>What should be the list of errors after been reordered.</h3>
<div id="errorListShouldBeAfterReorderOnLoad">
<a data-idcontrol="textbox1">error textbox1</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list1">error list1</a>
<a data-idcontrol="list3">error list3</a>
</div>
You can sort the errors based on the index of the element it belongs to
$('#errorList a').sort(function(a,b) {
var data1 = $(a).data('idcontrol'),
data2 = $(b).data('idcontrol'),
index1 = $('#' + data1).index(),
index2 = $('#' + data2).index();
return index1 - index2;
}).appendTo('#errorList');
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?