Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Jquery: find any paragraph that is followed by an unordered list, then apply CSS rule

Posted on 2011-09-14
3
Medium Priority
?
387 Views
Last Modified: 2012-05-12
At the moment i have a css rule that applies a padding-bottom:13px; to all paragraphs.
Unfortunately, this gap doesn't look good when an unordered list immediately follows a paragraph.

So, I would like to apply a margin-top:-13px; to the unordered list.

I need jquery code that:

1. Searches inside a div content.
2. In this div content, find any paragraph that is followed by an unordered list, apply margin-top:-10px to the unordered list

I know the Jquery code to find the paragraph and apply css rule goes something like this I think,
$('p').css( "margin-top", "-13px" );


Sample HTML Code

 
<div class="content">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>

<p>This is a title </p>
<ul>
  <li>the quick brown fox</li>
  <li>jumped over </li>
  <li>the lazy sheep</li>
</ul>

<p>This is another title </p>
<ul>
  <li>the lazy sheep</li>
  <li>jumped over </li>
  <li>the quick brown fox</li>
</ul>
</div>

Open in new window


Thanks!
0
Comment
Question by:jeremyll
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 400 total points
ID: 36540405
For example : $("p", "div").next("ul").css( "margin-top", "-13px" );

Test page : http://jsfiddle.net/94sFf/
0
 
LVL 82

Accepted Solution

by:
hielo earned 1600 total points
ID: 36540417
>>At the moment i have a css rule that applies a padding-bottom:13px; to all paragraphs.
How about applying NO padding to P preceeding UL:
<script type="text/javascript">
$(function(){
	$('ul').prev('p').css( "margin-bottom", "0px" );
});
</script>

but if you want the apply it to the ul, try:
$('p + ul').css('margin-top','-13px');

Open in new window

0
 

Author Closing Comment

by:jeremyll
ID: 36540476
You guys are Legendary!
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question