3

HTML は次のようになります。

<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 を使用して、クラス+ SomeINTEGERbackgroundColorを持つ要素のみを変更するにはどうすればよいでしょうか?position

poistionクラス+TheRespectiveIntegerを持つすべての要素を選択したい

4

8 に答える 8

6

特定の 1 つの数字だけでなく、そのパターンに一致するクラスを持つすべての要素の背景を変更したいと考えています。

単なる別の属性として扱い、値に対して部分一致を行うというハックな方法がおそらくあります。class

ただし、より良い解決策は、選択できる別のクラスを追加することです。おそらく、クラスを追加するものは何でも、同時にpositionXクラスも追加しpositionedます。

于 2013-06-21T06:42:23.830 に答える
4

これを試して：

$('.someClass').filter(function () {
    return /(\s|^)position[0-9]+(\s|$)/.test(this.className);
}).css('background-color', 'silver');

働くフィドル

正規表現を変更するだけで完璧な結果が得られます:)

于 2013-06-21T07:06:43.333 に答える
1

次のセレクターを試してください。

$("span:regex(class, (\s|^)position[0-9]+(\s|$))").css("background-color", "Green");

詳細については、jquery セレクターを記述して特定のパターンのクラスを選択するを参照してください。

セレクターの場合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));
}

James Padolseyによって提供されたこの素晴らしい実装。

実際の例を参照してください: http://jsfiddle.net/Q7fTW/16/

于 2013-06-21T06:45:56.537 に答える
0

これを試して

それは働いています

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

参照

http://api.jquery.com/category/selectors/attribute-selectors/

于 2013-06-21T07:16:27.323 に答える
0 
$(".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');
于 2013-06-21T06:41:48.383 に答える
0

これを試すこともできます：

<script type="text/javascript">
    $(function(){
        if( $(".someClass").hasClass(".position"+NUMBER) ){
            $(this).css({ 'backgroundColor','your color' });
        } 
    });
</script>
于 2013-06-21T06:46:55.347 に答える
-2

SomeINTEGER の値がわかっている場合は、次を使用します。

  $(".position" + SomeINTEGER).css('backgroundColor','red');

else // これは「位置」から開始することを示唆しています

 $('span[class^=position]).css('backgroundColor','red');
于 2013-06-21T06:49:07.533 に答える