Solved

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

Posted on 2011-09-14
3
375 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
3 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 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 400 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now