:nth-child ne fonctionne pas sous IE
Ive cherché pour mon problème spécifique et ne peut pas le trouver... j'espère que l'un de vous les gars peut vous aider.
Im essayant d'obtenir nth-child pour travailler dans IE - maintenant, j'ai lu que vous pouvez le faire avec Jquery, comment puis-je mettre en œuvre jquery dans ce cas?
Im aussi à l'aide de cette Lib élément ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
Il fonctionne parfaitement sous Firefox mais pas IE - s'il vous plaît aider - merci
<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>
Code 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");
});
- Il n'y a aucune mention de
nth-child
dans le js est lié à vous d'essayer de l'utiliser dans le code JavaScript/jQuery lui-même, ou en css? - Vous n'avez qu'à posté HTML. S'il vous plaît poster un code javascript qui représente le problème que vous rencontrez.
- Doit être marqué, javascript java.
- Je n'ai fait de donner un lien vers le code javascript
- Unihost - s'il vous Plaît passer pertinentes du code javascript dans la question. Cette aide les futurs lecteurs, lorsque le lien n'est plus valide. J'ai regardé ton code, et que @David l'a souligné, vous n'êtes pas à l'aide de
nth-child
dans le javascript, donc je ne sais pas ce qu'est la question. - Ive fait cela, merci
Vous devez vous connecter pour publier un commentaire.
Il existe diverses façons d'utiliser jQuery avec
:nth-child
pseudo-sélecteur:Édité en réponse à @Unihost question (dans les commentaires, ci-dessous):
Absolument, la seule chose à retenir est que vous êtes probablement à l'aide de jQuery pour appliquer le style css, donc je te suggère de l'utiliser de la manière suivante:
Et puis ajoutez le code suivant (en démo) à votre css:
J'avais fortement conseiller de ne pas essayer d'appliquer tous les styles avec jQuery, sinon ça devient très lourd très rapidement. De Plus, de cette façon, vous pouvez utiliser le
nth-child()
pseudo-sélecteurs dans votre CSS normal et inclure jQuery seulement pour IE:D'ailleurs, il y a un JS Fiddle démonstration de l'intention, si vous désirez voir comment il pourrait travail.
:nth-child()
pour la durée de navigateurs (Firefox, Chrome, Safari, Opéra...) et il suffit d'utiliser les commentaires conditionnels et jQuery pour apporter IE jusqu'à la vitesse. Le keep-it-simple principe en est une bonne.IE ne supporte pas
:nth-child
. Utiliser jQuery avec la régulière sélecteur CSS, par exemple: