jQuery:如何在这里选择具有特定类的元素?
HTML是这样的:jQuery:如何在这里选择具有特定类的元素?
<span class="someClass position1" >span1</span>
<span class="someClass" >span2</span>
<span class="someClass" >span3</span>
<span class="someClass position2" >span4</span>
<span class="someClass" >span5</span>
<span class="someClass position4" >span6</span>
<span class="someClass position10" >span7</span>
<span class="someClass" >span8</span>
<span class="someClass position12" >span9</span>
现在,使用jQuery,我将如何改变只具有类position
+ SomeINTEGER这些元素的backgroundColor
?
我想选择所有的类poistion
元素+ TheRespectiveInteger
var n =10;
$(".someClass position"+n).css("background-color","#b0c4de");
$(".position" + someINTEGER).css('backgroundColor','your color');
编辑:
你问的问题的方式是相当混乱。
鉴定具有阶级立场,+整数的元素,你需要指定另一个类,以他们为识别
<span class="someClass integerclass position1" >span1</span>
<span class="someClass integerclass position2" >span4</span>
$(".integerclass).css('backgroundColor','your color');
什么是'someINTEGER'? –
@NavneetSaini我以为你有一个? –
你想放在那里的整数,像$(“。position”+1) –
我假设你想改变的所有元素的背景下,有一个匹配该模式的类 - 不仅仅是一个特定的数字。
有可能是通过治疗class
只是另一种属性,做对的值部分匹配做这个哈克方式。
但是,更好的解决方案是添加另一个可以选择的类。也许有什么是增加positionX
类也同时增加一个positioned
类。
作为一个额外的:如果你使用'定位'类,你可以简单地使用CSS样式表来设置背景颜色。 – LeGEC
请尝试以下选择:
$("span:regex(class, (\s|^)position[0-9]+(\s|$))").css("background-color", "Green");
更多参考,请参阅Write a jquery selector to select a class with a certain pattern
对于regex
选择,你需要编写的代码下面一行:
jQuery.expr[':'].regex = function(elem, index, match) {
var matchParams = match[3].split(','),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(':')[0] : 'attr',
property: matchParams.shift().replace(validLabels,'')
},
regexFlags = 'ig',
regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
这wonderfull implementation给出James Padolsey。
我在jQuery文档中看不到任何':regex'选择器。您链接的答案指的是在使用此特定插件之前需要包含的插件:http://james.padolsey.com/javascript/regex-selector-for-jquery/ –
您需要包含'regex'的定义选择。看到我编辑的代码。 –
我不知道这个自定义正则表达式选择器评论权威,但我怀疑这不工作如书面。为什么你有'.'如果你匹配类属性?你如何防止选择“定位”类?如果'position'是属性值中的第一个类会发生什么?如果它不是第一个呢? – jcsanyi
你也可以试试这个:
<script type="text/javascript">
$(function(){
if($(".someClass").hasClass(".position"+NUMBER)){
$(this).css({ 'backgroundColor','your color' });
}
});
</script>
'hasClass'超过一套不会做你的想法,'$(this)'不是你认为你在哪里使用它。 –
如果你知道SomeINTEGER的值,然后使用:
$(".position" + SomeINTEGER).css('backgroundColor','red');
其他//这表明从开始“position”
$('span[class^=position]).css('backgroundColor','red');
您的第一个解决方案实际上并没有回答这个问题 - 他们**不知道整数。第二种解决方案假定位置类是元素的第一个类 - 这不能得到保证。 – jcsanyi
$(".someClass").each(function(){
var classes = $(this).attr('class').split(/\s+/);
for (var i = 0; i < classes.length; ++i)
{
if (classes[i].match(/^position\d+$/i)) {
$(this).css('background-color', 'red');
}
}
});
对于任何包含一个类的元素是positionN
其中N
是任何整数以及someClass
类,如果您必须这样做。
试试这个:
$('.someClass').filter(function() {
return /(\s|^)position[0-9]+(\s|$)/.test(this.className);
}).css('background-color', 'silver');
你可以只修改正则表达式来获得完美的结果:)
试试这个
它的工作
$('[class^="someClass position"]').css({ 'background-color': 'red' })
//Selects elements that have the specified attribute with a value beginning exactly with a given string.
或
$('[class*="position"]').css({ 'background-color': 'red' })
//Selects elements that have the specified attribute with a value containing the a given substring.
或
$('[class^="someClass"][class*=" position"]').css({ 'background-color': 'red' })
//Matches elements that match all of the specified attribute filters.
refrence
http://api.jquery.com/category/selectors/attribute-selectors/
你想,对于一个特定的整只(这将是容易),或每个可能的整数? –
不,我想选择所有那些有位置+ someIntegers –
@JanDvorak每个可能的整数的类。 –