我搜索了我的具体问题,但找不到它......我希望你们中的任何人都可以提供帮助。
我正在尝试让 nth-child 在 IE 中工作 - 现在我读到可以使用 Jquery 来完成此操作,我该如何在这种情况下实现 jquery?
我也在使用这个库元素 ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
它在 Firefox 中完美运行,但在 IE 中不起作用 - 请帮忙 - 谢谢
<div class="info-col">
<h2>Header 1</h2>
<a class="imagehref="imagepath">View Image</a>
<dl>
<dt>Sub header 1</dt>
<dd>Copy 1.</dd>
<dt>Sub header 2</dt>
<dd>Copy2</dd>
<dt>Sub header 3</dt>
<dd>Copy 3</dd>
<dt>Sub header 4</dt>
<dd>Copy 4</dd>
<dt>Sub header 5</dt>
<dd>Copy 5</dd>
<dt>Sub header 6</dt>
<dd>Copy 6</dd>
</dl>
</div>
Javascript代码
$(function() {
// Set up variables
var $el, $parentWrap, $otherWrap,
$allTitles = $("dt").css({
padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
"cursor": "pointer" // make it seem clickable
}),
$allCells = $("dd").css({
position: "relative",
top: -1,
left: 0,
display: "none" // info cells are just kicked off the page with CSS (for accessibility)
});
// clicking image of inactive column just opens column, doesn't go to link
$("#page-wrap").delegate("a.image","click", function(e) {
if ( !$(this).parent().hasClass("curCol") ) {
e.preventDefault();
$(this).next().find('dt:first').click();
}
});
// clicking on titles does stuff
$("#page-wrap").delegate("dt", "click", function() {
// cache this, as always, is good form
$el = $(this);
// if this is already the active cell, don't do anything
if (!$el.hasClass("current")) {
$parentWrap = $el.parent().parent();
$otherWraps = $(".info-col").not($parentWrap);
// remove current cell from selection of all cells
$allTitles = $("dt").not(this);
// close all info cells
$allCells.slideUp();
// return all titles (except current one) to normal size
$allTitles.animate({
fontSize: "14px",
paddingTop: 5,
paddingRight: 5,
paddingBottom: 5,
paddingLeft: 5
});
// animate current title to larger size
$el.animate({
"font-size": "20px",
paddingTop: 10,
paddingRight: 5,
paddingBottom: 0,
paddingLeft: 10
}).next().slideDown();
// make the current column the large size
$parentWrap.animate({
width: 320
}).addClass("curCol");
// make other columns the small size
$otherWraps.animate({
width: 140
}).removeClass("curCol");
// make sure the correct column is current
$allTitles.removeClass("current");
$el.addClass("current");
}
});
$("#starter").trigger("click");
});
最佳答案
有多种方法可以通过 :nth-child
使用 jQuery。伪选择器:
$('dt:nth-child(odd)') // gets every odd-numbered dt
$('dt:nth-child(even)') // gets every even-numbered dt
$('dt:nth-child(3n)') // gets every third dt
<小时/>
编辑回应 @Unihost 的问题(在下面的评论中):
How do I create and link this jquery file... Just like any normal .js file?
当然,唯一要记住的是,您可能正在使用 jQuery 来应用 css,所以我建议按以下方式使用它:
$('dt:nth-child(odd)').addClass('oddDts');
$('dt:nth-child(even)').addClass('evenDts');
然后将以下内容(作为演示)添加到您的 css 中:
dt:nth-child(odd), /* for useful 'modern' broswers that understand */
dt.oddDts { /* referencing the class applied with IE-specific jQuery file */
background-color: #ffa;
}
dt:nth-child(even), /* for useful 'modern' broswers that understand */
dt.evenDts { /* referencing the class applied with IE-specific jQuery file */
background-color: #f00;
}
我强烈建议不要尝试使用 jQuery 应用所有相关样式,否则它很快就会变得非常笨拙。另外,通过这种方式,您可以在常规 CSS 中使用 nth-child()
伪选择器,并仅包含适用于 IE 的 jQuery:
<!--[if ie]>
<script src="path/to/jsFile.js" type="text/javascript"></script>
<![end if]-->
顺便说一句,有一个JS Fiddle demo of intent ,如果您想了解它可能如何工作。
关于jquery - :nth-child is not working in IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3951390/