问题
How would you convert this block of css into jquery?
.nav li a:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height:0;
width: 0;
border: 5px solid transparent;
top: 50% ;
right:5px;
}
I've tried a couple different ways but nothing I tried worked properly. Where this css selects only before the the jquery selects the whole anchor.
$(".nav li a:first-child:nth-last-child(2)").before().css(...); // did not work
$(".nav li a:first-child:nth-last-child(2)").before(function(){
$(this).css(...);
}); // did not work
I tried a lot of other stuff as well, let me know what you guys think, Thanks!
HTML:
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Class Assignments</a>
<ul>
<li><a href="#">Java</a>
<ul>
<li><a href="java1.php">Java 1</a></li>
<li><a href="java2.php">Java 2</a></li>
<li><a href="java3.php">Java 3</a></li>
<li><a href="java4.php">Java 4</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="javaScript1.php">JavaScript 1</a></li>
<li><a href="javaScript2.php">JavaScript 2</a></li>
<li><a href="javaScript3.php">JavaScript 3</a></li>
<li><a href="javaScript4.php">JavaScript 4</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">C#</a></li>
</ul>
</li>
<li><a href="index.php">Projects</a>
<ul>
<li><a href="project.php">Project</a></li>
<li><a href="project.php">Project</a></li>
<li><a href="project.php">Project</a></li>
<li><a href="project.php">Project</a></li>
</ul>
</li>
<li><a href="index.php">Contact</a></li>
</ul>
This is what it looks like with the css...
回答1:
Not sure that would work exactly the same as with :before
, but what if you used jQuery to insert a <span>
-tag instead, and then adjust the CSS of the <span>
? I.e.
$(".nav li a:first-child:nth-last-child(2)").prepend('<span class="before-hack" />');
$('.before-hack').css(...);
Here's a fiddle: http://jsfiddle.net/Niffler/287y3s4s/9/
回答2:
Javascript can't modify :before, :after pseudoselectors.
Solution for your problem is add css rules directly to css file. https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets
回答3:
First store the css into an object:
var css =
{
"content":"",
"position":"absolute",
"height":"0",
"width":"0",
"border":"5px solid transparent",
"top":"50%",
"right":"5px"
};
Then call the css function before any other functions:
$(".nav li a:first-child:nth-last-child(2)").css(css).before(function(){
});
I believe you will need to call the css function before the other functions.
来源:https://stackoverflow.com/questions/27028793/select-pseudo-elements-with-jquery