Detect a DIV open and close and apply styles to match what already exist
There's no real easy way for me to explain what I'm trying to do other than simply post some code and ask how I'd write a jQuery or PHP script to do what I need to do to make it work regardless of the comments added to the forum post. Make two files: index.php and style.css and paste the following information into them.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>Carswipe - TEST</title>
</head>
<body>
<div id="container">
<div class="parent">
<p>TEST</p>
<div class="child_1">
<p>STUFF</p>
<div class="child_2">
<p>MORE STUFF</p>
<div class="child_1">
<p>EVEN MORE</p>
<p>TEST</p>
</div>
<div class="child_1">
<p>JUNK</p>
<div class="child_2">
<p>ANDS TUFF</p>
</div>
<div class="child_2">
<p>TEST</p>
<div class="child_1">
<p>TEST</p>
<div class="child_2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl. Aliquam erat volutpat. Proin eu eros mollis dui fringilla sodales. Curabitur venenatis tincidunt felis ac congue. Maecenas at odio dui, sit amet congue sapien. Proin placerat feugiat eros, non mollis quam pharetra at. Duis gravida eleifend ligula nec auctor. Fusce nulla diam, fringilla non ultrices in, iaculis eu tellus. Sed mollis consequat turpis sit amet facilisis. Donec pretium luctus aliquet. Curabitur placerat varius purus vel congue. Aliquam erat volutpat. Curabitur vitae eros sed turpis sollicitudin mattis. Morbi venenatis pulvinar 开发者_如何学Cnunc, at vulputate massa placerat a. Nam et tortor id nisi consequat tempor eget sit amet risus. Praesent bibendum, velit eu hendrerit porttitor, elit mauris posuere nisl, non pellentesque est leo a quam.</p>
</div>
<div class="child_2">
<p>TEST</p>
</div>
</div>
</div>
</div>
</div>
<div class="child_2">
<p>MORE TEST</p>
</div>
</div>
<div class="child_1">
<p>TESTING MULTIPLE LINES</p>
<p>TADA</p>
<div class="child_2">
<p>TEST</p>
</div>
</div>
</div>
<div class="parent">
<p>JUNK</p>
<div class="child_1">
<p>AND STUFF</p>
<div class="child_2">
<p>AND THINGS</p>
</div>
<div class="child_2">
<p>HEYO</p>
<p>PLEASE!</p>
<div class="child_1">
<p>TEST1</p>
<div class="child_2">
<p>TEST2</p>
<div class="child_1">
<p>TEST3</p>
</div>
<div class="child_1">
<p>TEST4</p>
</div>
<div class="child_1">
<p>TEST5</p>
<div class="child_2">
<p>TEST6</p>
<div class="child_1">
<p>TEST</p>
</div>
<div class="child_1">
<p>TEST</p>
</div>
</div>
</div>
</div>
<div class="child_2">
<p>TEST7</p>
</div>
</div>
<div class="child_1">
<p>TEST8</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
/* Links */
a{color:#7F0404;text-decoration:none}
a:hover{color:#5E5E5E;text-decoration:underline}
/* Core Style */
html,body{margin:0;padding:0;height:100%}
body{font:90% Tahoma;background:#5E5E5E url('images/fell-hall.png') no-repeat top center}
#container{width:1004px;margin:0 auto -91px auto}
p{padding:2px 10px 2px 20px}
.parent{margin:8px 8px 8px 0px;border:1px solid #bbbcbf;border-radius:8px;background-color:#fff}
.child_1:nth-child(even){border:1px solid #bbbcbf;border-radius:8px;margin:8px 8px 8px 30px;background-color:#f7f7f8}
.child_1:nth-child(odd){border:1px solid #bbbcbf;border-radius:8px;margin:8px 8px 8px 30px;background-color:#f7f7f8}
.child_2:nth-child(even){border:1px solid #bbbcbf;border-radius:8px;margin:8px 8px 8px 30px;background-color:#fff}
.child_2:nth-child(odd){border:1px solid #bbbcbf;border-radius:8px;margin:8px 8px 8px 30px;background-color:#fff}
Now, view the index.php file. This is what I want the forum posts to look like. You might recognize it as what the Reddit Stylize Extension look like (for at least Chrome) when viewing Reddit posts and the subsequent comments within them.
The problem is, that the div's are created by the users and thus, cannot have hand-coded classes for each. It must determine how many div's are open, how many are closed, and apply the proper parent/child class appropriately. I have been unable to wrap my head around how to do this and I'm pretty sure it would be a really simple jQuery or PHP script. Any help would be greatly appreciated!
Thanks!
I do not think you should care about what is open and what closed. You should only care for the nesting level as that is what determines the styling..
I believe this is what you want
$('#container div')
.each(function(){
var length = $(this).parentsUntil('#container').length;
if (length){
var alternate = 2 - (length % 2 );
$(this).addClass('child_' + alternate);
}else{
$(this).addClass('parent');
}
});
Demo at http://jsfiddle.net/gaby/wNvwv/2/
Also you do not need the nth-child selectors in the CSS. Just the two differenct classes .child_1 and .child_2 which determine the alternating style per depth.
(the odd and even are the same in your code anyway..)
加载中,请稍侯......
精彩评论