How can I use jquery to toggle children elements of an <li> element without css selectors?
Question
I have this list and when I hover one of the anchor tags, I want the p element of its parent li to toggle between hiding and showing. Unfortunately In my code so far when I hover the anchor tags it toggles the p element of every li element in the list. How can I select only the p of the parent li? Here is my code. Sorry I'm new to jquery.
<body>
<div id="container">
<ul>
<li>
<a href="#"><h3>CIST 2612 Computer Forensics</h3></a>
<p>(Prerequisite: CIST 1122, CIST 1601). This course examines the use of computers in the commission of crimes, collection, analysis and production of digital evidence. Students will use computer resources to explore basic computer forensic investigation techniques.</p>
</li>
<li>
<a href="#"><h3>CIST Web Technologies</h3></a>
<p>(Prerequisite: CIST 1001) In Web Technologies, students will investigate one or more software packages that help automate Web content creation. Students will explore and utilize various features of software packages such as CSS, multimedia incorporation, scripting technologies, form creation, search functionality, advanced image techniques and database connectivity. </p>
</li>
<li>
<a href="#"><h3>CIST 2531 Web Graphics II </h3></a>
<p>(Prerequisite: CIST 1530) Students will further explore how to use and industry standard or open source graphics software program to create Web ready images and Web pages. Topics include advanced image correction techniques and adjustments, typography and interpolation as well as conditional scripting statements and arrays. </p>
</li>
</ul>
</div>
</body>
$(function(){
$("li").children('p').hide();
});
$(document).ready(function(){
$("a").hover(function(){
$("li").children("p").toggle(200);
});
});
http://codepen.io/anon/pen/GgBBMr This is the codepen I'm working in. Thanks for your help guys!
2 answers
solution1
1 2015-03-05 18:54:04
solution2
0 2015-03-05 19:27:24
Here's a step-by-step approach using the scope of the parent:
$("a").hover(function () {
// First, you have 'this' which is the '<a>' that you are hovering.
var $this = $(this);
// Second, find the parent 'li'
var $parentLi = $this.parent('li');
// Now we find all the '<p>' tags inside the parent '<li>' scope
var $allPTags = $('p', $parentLi);
//now toggle them
$allPTags.toggle(200);
});
You can string everything all together, but I generally prefer to create variables, because in real life, it's most often not as easy as stringing together a simple function.
$("a").hover(function () {
var $parentLi = $(this).parent('li');
// still using scope
$('p', $parentLi).toggle(200);
});
or
$("a").hover(function () {
$(this)
.parent('li') // find parent <li> can also use .closest('li') but closest traverses the DOM all the way up until if finds an 'li' which might not be what you want. .parent() ensures your are selecting the parent.
.find('p') // find <p> inside parent <li>
.toggle(200); // toggle
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.