Solved

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

Posted on 2011-09-14
3
376 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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 is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

910 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

21 Experts available now in Live!

Get 1:1 Help Now