li:odd li:even not working
I have this piece of code in my Wordpress theme:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$ ('ul li:even').addClass('even');
$ ('ul li:odd').addClass('odd');
});
</script>
and in the body part
<div id开发者_开发百科="specs">
<ul>
<li><strong>Standby Time</strong> 1100hr</li>
<li><strong>Internal Storage</strong> 16GB or 32GBGB</li>
<li><strong>Memory Slot</strong> microSD up to 32GB</li>
<li><strong>Camera</strong> 8 Megapixel</li>
<li><strong>Front Facing Camera</strong> 2 Megapixel</li>
<li><strong>Video Camera</strong> Yes, 1080p</li>
<li><strong>Camera Flash</strong> 1 x LED</li>
<li><strong>Coverage (Band)</strong> Quad</li>
</ul>
</div>
The jQuery doesn't seem to apply odd and even classes. Tried with different versions of jQuery but still nothing. Can someone help me with this problem?
That should work just fine, but we can also try to rewrite it a bit to also use the best practice of the :even
and :odd
-selectors according to the jQuery docs:
Additional Notes:
Because :even is a jQuery extension and not part of the CSS specification, queries using :even cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :even to select elements, first select the elements using a pure CSS selector, then use .filter(":even").
$(document).ready(function() {
$('ul li').filter(':even').addClass('even').end()
.filter(':odd').addClass('odd');
});
Checklist:
- Is jQuery loaded? (Check you network monitor in Firebug/Chrome)
- Do you need the
ul
filter in the first selector? Selecting on justli
would be even more performant since jQuery could utilizegetElementsByTagName
.
That jQuery code works just fine. http://jsfiddle.net/V2Nk7/
I'm guessing that jQuery is not being properly included in your page, check the <?php bloginfo('template_url'); ?>
is outputing, I would wager that it is causing a malformed URL and the script tag is 404ing.
its working here http://jsfiddle.net/7ppTM/
make sure jquery is loaded
Looks like jQuery has either not been loaded correctly or there's a conflict using $
(Prototype?).
What does the jQuery <script>
line look like when you view source?
If it is a library conflict, try changing this line
$(document).ready(function() {
to
jQuery(function($) {
Also, as (was) indicated in a comment, you can achieve this effect purely using CSS. See http://reference.sitepoint.com/css/pseudoclass-nthchild
You've got an unecessary space between $ and the brackets. Try:
<script type="text/javascript">
$(document).ready(function() {
$('ul li:even').addClass('even');
$('ul li:odd').addClass('odd');
});
精彩评论