I want to select html of class "postHandel" when I click replyBtn.
There are multiple "repost" divs, I want postHandel of the current div in which I am clicking replyBtn.
<div class="repost" data-id="52">
<div class="profileImg"></div>
<div class="postWrap">
<div class="postUser">Tejas Kulkarni</div>
<div class="postHandel">#tejas</div>
<div class="postText"> </div>
</div>
<i class="icon-chevron-down"></i>
<div class="clearfix"></div>
<div class="postOptions twtOptRP52">
<ul>
<li> <a class="btn btn-mini rtBtn" data-id="96"><i class="icon-retweet"></i> Repost</a></li>
<li> <a class="btn btn-mini replyBtn" data-id="96"><i class="icon-reply"></i> Reply</a></li>
<li> <a class="btn btn-mini favBtn" data-id="96"><i class="icon-star"></i> Fav</a></li>
<li><div class="loadingPostsBtn hideme loadingBtn-96 hideme"><img src="http://linkzone.dev/assets/img/ajax-loader.gif"></div></li>
<li><div class="loadingFailBtn hideme loadingFail-96 hideme"><img src="http://linkzone.dev/assets/img/ajax-fail.gif"></div></li>
</ul>
</div>
My jQuery Code is :
$(document).on("click",".replyBtn",function(){
var postHandel = $(this).closest(".postWrap").html('');
var log = $(postHandel).closest(".postHandel").html();
console.log(log);
});
Try this:
var log = $(this).closest(".repost").find(".postHandel:first").html();
$(this) // current element (.replybtn)
.closest('.report') // up to main wrapper (top-most grouping element)
.find('.postWrap > .postHandel') // down to postHandel
.html(); // the end value
You may not even need the .postWrap > discriminator, but it does make sure that it's the that .postHandel you're after.
Related
I read some of the answers here similar to my question, but I still don't understand what's going on.
I have this JS snippet:
function renderButtons() {
let buttonCollection = document.getElementsByClassName("btn");
let arrayOfBtn = [...buttonCollection];
arrayOfBtn.forEach(function(element) {
function modifyClass() {
element.classList.toggle("active");
}
element.addEventListener("click", modifyClass);
})
}
That is meant to add/remove the class "active" of a button when I click on it.
This is the HTML:
<div class="panel controls">
<ul>
<li>
<button class="btn btn-pepperonni active">Pepperonni</button>
</li>
<li>
<button class="btn btn-mushrooms active">Mushrooms</button>
</li>
<li>
<button class="btn btn-green-peppers active">Green peppers</button>
</li>
<li>
<button class="btn btn-sauce active">White sauce</button>
</li>
<li>
<button class="btn btn-crust active">Gluten-free crust</button>
</li>
</ul>
</div>
And it works, the problem is that I have to click twice each time on the button to add or remove the class of that button in particular.
Any help will be very appreciated.
Thank you very much!
EDIT:
Remove your RenderButtons function and instead toggle the "active" class once you click the button like this on every ingredient:
document.querySelector('.btn.btn-pepperonni').onclick = function() {
state.pepperonni = !state.pepperonni;
renderEverything()
this.classList.toggle("active");
}
Basically what you do is you call two onclick events on the button and they do not work together.
Also you are over complicating the whole thing with your RenderButtons Functions :)
Hope that helps!
Your JS must be loaded at the end of your HTML. Your HTML will load the content from TOP to BOTTOM. So your Scirpt want to access "btn" elements, which are at the moment not genereted.
First HTML, then JS.
For such a short function, you could use a inline function as below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="panel controls">
<ul>
<li>
<button class="btn btn-pepperonni active">Pepperonni</button>
</li>
<li>
<button class="btn btn-mushrooms active">Mushrooms</button>
</li>
<li>
<button class="btn btn-green-peppers active">Green peppers</button>
</li>
<li>
<button class="btn btn-sauce active">White sauce</button>
</li>
<li>
<button class="btn btn-crust active">Gluten-free crust</button>
</li>
</ul>
</div>
</body>
<script>
var buttonCollection = document.getElementsByClassName("btn");
for (var i = 0; i < buttonCollection.length; i++)
{
buttonCollection[i].addEventListener("click", function(){
this.classList.toggle("active");
});
}
</script>
</html>
As previous answers have shown how to fix your original code I have tried to find a simplified version of what you want to do.
In my solution I am using a "delegated event binding": the click event is bound to the parent <div> element and fires only when the actual click target is of class btn. This approach will work on elements that have not even been created at the time of the binding. And it is more "lightweight", as there is only one binding.
document.querySelector("div.panel.controls")
.addEventListener("click",function(ev){
var cl=ev.target.classList;
if (cl.contains("btn")) cl.toggle("active");
});
.active {background-color: #fcc}
<div class="panel controls">
<ul>
<li>
<button class="btn btn-pepperonni active">Pepperonni</button>
</li>
<li>
<button class="btn btn-mushrooms active">Mushrooms</button>
</li>
<li>
<button class="btn btn-green-peppers active">Green peppers</button>
</li>
<li>
<button class="btn btn-sauce active">White sauce</button>
</li>
<li>
<button class="btn btn-crust active">Gluten-free crust</button>
</li>
</ul>
</div>
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 :)
So, I had a working function in jQuery but then I decided to use Angular for my application. Just can't find the way so it adds the CSS to only one child element.
Jquery code that was working
$('.list-div').on('mouseenter', function(){
$(this).find('.client-jar').css('opacity','1');
}).on('mouseleave', function() {
$(this).find('.client-jar').css('opacity','0');
});
Current html
<ul>
<li ng-repeat="one in ones | orderBy:'-date'">
<div class="list-div">
<div class="row jar-div first-jar-div" ng-mouseover="showButton()" ng-mouseleave="hideButton()">
<div class="col-xs-7 description-div">
<p class="version">{{ one.version }}</p>
<p class="date">{{ one.date }}</p>
</div>
<div class="col-xs-5 buttons-div">
<div class="list-button client-jar">
<a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
</div>
<div class="list-button server-jar">
<a class="list-link">Server jar</a>
</div>
</div>
</div>
</div>
</li>
</ul>
And Current Angular JS
$scope.showButton = function(){
angular.element('.list-div').find('.client-jar').css('opacity','1');
};
$scope.hideButton = function(){
angular.element('.list-div').find('.client-jar').css('opacity','0');
};
I would use:
https://docs.angularjs.org/api/ng/directive/ngMouseenter
<button ng-mouseenter="hoverState = true">mouse in mouse out</button>
Then use with:
https://docs.angularjs.org/api/ng/directive/ngMouseleave
<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false">mouse in mouse out</button>
At this point you have a hover over and off flag. You can now pick this flag up with ng-class to set and unset a CSS class which contains your opacity stuff, and any future CSS animations etc etc:
https://docs.angularjs.org/api/ng/directive/ngClass
<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">mouse in mouse out</button>
No jQuery required, AngularJS is just a totally different way of going about things.
<style>
.opacity-class .client-jar{
opacity:0;
}
</style>
<ul>
<li ng-repeat="one in ones | orderBy:'-date'">
<div class="list-div">
<div class="row jar-div first-jar-div" ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">
<div class="col-xs-7 description-div">
<p class="version">{{ one.version }}</p>
<p class="date">{{ one.date }}</p>
</div>
<div class="col-xs-5 buttons-div">
<div class="list-button client-jar">
<a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
</div>
<div class="list-button server-jar">
<a class="list-link">Server jar</a>
</div>
</div>
</div>
</div>
</li>
</ul>
angular.module('App').directive('listFade', function() {
return function(scope, element) {
element.bind('mouseover', function(children) {
// YOUR ANIMATION CODE HERE
});
element.bind('mouseout', function(children) {
// YOUR ANIMATION OUT CODE HERE
});
}
})
then just add the directive to your ng-repeat markup, list-fade=""
you don't need children but its a easy way to call the children of each element. This should help you out. Then get rid of that ng-mouseover showButton();
Updating your code to use inline CSS, would be like this.
var element = document.querySelector('.list-div .client-jar');
$scope.showButton = function(){
angular.element(element).css('opacity','1');
};
$scope.hideButton = function(){
angular.element(element).css('opacity','0');
};
As in AngularJS .element documentation, it's said that you need to pass a element.
You can also use ng-class, creating a class for opacity:
<div class="client-jar" ng-class="{class: expression}"></div>
https://docs.angularjs.org/api/ng/directive/ngClass
Or use ng-show and ng-hide for display control:
<div class="client-jar" ng-show="expression"></div>
https://docs.angularjs.org/api/ng/directive/ngShow
You could even use ng-style for inline css:
<div class="client-jar" ng-style="{'opacity': '1'}"></div>
https://docs.angularjs.org/api/ng/directive/ngStyle
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?