問題描述

我已經搜索了我的具體問題，但找不到...希望你們能提供幫助.

Ive searched for my specific problem and can't find it... I hope any of you guys can help.

我正在嘗試讓 nth-child 在 IE 中工作 - 現在我讀到您可以使用 Jquery 來完成，我該如何在這種情況下實現 jquery?

Im trying to get nth-child to work in IE - now Ive read that you can do it with Jquery, how do I implement jquery in this instance?

我也在使用這個 Lib 項目 ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

Im also using this Lib item ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

它在 Firefox 中完美運行，但在 IE 中無法運行 - 請幫助 - 謝謝

It works perfectly in Firefox but not IE - please help - thanks

        <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 代碼

Javascript code

$(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 偽選擇器:

There are various ways to use jQuery with :nth-child pseudo-selector:

$('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

我如何創建和鏈接這個 jquery 文件...就像任何普通的 .js 文件一樣?

How do I create and link this jquery file... Just like any normal .js file?

當然，唯一要記住的是，您大概是在使用 jQuery 來應用 css，所以我建議您按以下方式使用它:

Absolutely, the only thing to remember is that you're presumably using the jQuery to apply css, so I'd suggest using it in the following manner:

$('dt:nth-child(odd)').addClass('oddDts');
$('dt:nth-child(even)').addClass('evenDts');

然后將以下內容(作為演示)添加到您的 css 中:

And then add the following (as a demo) to your 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:

I'd strongly advise not attempting to apply all the relevant styles with jQuery, otherwise it gets very unwieldy very quickly. Plus, this way, you can use the nth-child() pseudo-selectors in your regular CSS and include the jQuery only for IE:

<!--[if ie]>
    <script src="path/to/jsFile.js" type="text/javascript"></script>
<![end if]-->

順便說一句，如果你想看看它是如何實現的，有一個 JS Fiddle 演示，可能工作.

Incidentally, there's a JS Fiddle demo of intent, if you'd like to see how it might work.

這篇關于:nth-child 不在 IE 中工作的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！