Question

在这里有一个艰难的人！

我正在创建一个博客模板，客户希望在模板的右栏中应用不同颜色的标题。

问题是，我对博客引擎控制的html几乎无法控制。

我希望能够做到的是：

选择具有“title”类的h2元素的第N个实例，并使用Jquery应用css样式。

一个限制因素是，看起来Jquery想要告诉它父元素是什么，所以它可以计算元素。然而，在这个设计中，元素可以出现在任何地方，它是我感兴趣的整个页面的实例计数。如果我在这里错了，请纠正我。

我尝试了以下代码但未成功 - 尝试使用间接decendance CSS选择器：

$(document).ready(function () {

            alert('test');

            $("#RightColContent S+ h2.title:nth-child(2)").css('background-color', 'green');
            $("#RightColContent S+ h2.title:nth-child(3)").css('background-color', 'red');
        });

此代码应用了样式，但是应用于所有元素，可能是因为我没有提供父元素：

$("h2.title:nth-child(1)").css('background-color', 'green');

请参阅firebog html检查图片以查看html流程。

alt text http://bombdefused.com/firebug.png

对任何可以帮助我的人表示感谢。

Answer 1

像这样使用eq选择器

$('h2.title:eq(4)')    //selects the 5th element in the selection

Answer 2

这应该有效：

$("h2.title:eq(n)")

选择具有类标题的所有h2，然后从该列表中返回第n个项目。请记住，eq是0索引的，所以你实际上要n-1来获取上面的第n个元素。

查看simple example。

Answer 3

我希望能够做到的是：

选择h2元素的第N个实例   用一类'标题'，并申请一个   使用Jquery的CSS样式。

$('h2.title:eq(N-1)').css('property', 'value');

http://api.jquery.com/eq-selector/

或

$('h2.title').eq(N-1).css('property', 'value');

http://api.jquery.com/eq/

Answer 4

您还可以加载每个h2，然后使用jquery.each：

应用颜色

$('#RightColContent h2.title').each(function(index) {
    //apply your different css classes to each item
    $(this).addclass('title' + index);
  });

在你的css中，你将为每个索引类创建一个规则：

.title1 { color: red;}
.title2 { color: blue;}
.title3 { color: green;}

Answer 5

使用：eq
$('h2.title:eq('+i+')');
或：nth-of-type
$('h2.title:nth-of-type('+i+1+')');
或者甚至像简单那样的东西：
$($('h2.title')[i]);
其中$('h2.title')[i]是 JavaScript元素，$($('h2.title')[i])是 jQuery元素。

如何将样式应用于类的第N个实例，并通过间接继承查找 - CSS Jquery

5 个答案: