2016-07-05 4 views
3

私は現在、個人的な使い方のためにJQueryアプリケーションを開発しています。リストの最後のクラスに基づいて決定を下しています。これは常にソートの識別子です。問題は、今私は私がしようとしているコードに一つの場所を持っているということですクラスリストの中に挿入

class1 class2 class_with_id 

:のように要素のクラスが何かある

$("#myelement").attr('class').split(/\s+/).pop() 

:としてそれは多くの場所で行われています私は通常、このように行うだろうリストにクラスを追加する:しかし

$("#myelement").addClass("newclass") 

、作るのクラスは次のようになります。

class1 class2 class_with_id newclass 

その後、識別子クラスを取得しても失敗します。最初にそれを追加しています

$("#myelement").attr('class', "newclass " + $("#myelement").attr('class')) 

newclass class1 class2 class_with_id 

は、私は2つの質問があり、両方の関連:私はそれがこれで作業しました

  1. はです最も簡単な/最も簡単な方法は、そのそれを最初に追加することはできますか?

  2. 空の文字列操作をせずに、クラスの途中でクラスを追加する簡単な方法はありますか?私。今、それはだ、それはあなたが行うようにクラス属性を使用することをお勧めではないので、この目的のためにdata-* attributesを使用して、より良いコメントで述べたように

    class1 class2 newclass class_with_id 
    
+4

私はあなたが問題を抱えていると思いますが、あなたが探しているソリューションは良いものではありません。 'class_with_id'の代わりに、おそらく' data-with-id = "id" 'を使うべきです... –

+0

データ属性を使うなら、これを心配する必要はありませんが、私はKarl-Andreに同意します。 [data-x]セレクタを使用すると、CSSやJavaScriptのデータ属性を引き続きターゲットにすることができます。データIDを作成する場合は、[data-id]を使用して呼び出すことができます。 – will

+0

ダイナミックなデータ属性がセマンティックコンテンツではないため、データでスタイリングすることを誓う人もいれば、クラスが正しくない人もいます。それはまったく適切だが、私には思われる。 – Jonathon

答えて

2

:私はそれが最後から二番目の要素になりたかったと言います例えば置き換えるので、そのような場合のために作られていない:

$("#myelement").attr('class').split(/\s+/).pop(); 

で:

$("#myelement").data('with-id'); 

属性data-with-idを取得し、でそれを追加するには:

$("#myelement").data('with-id','some value'); 

の代わりに:

$("#myelement").addClass("newclass"); 

は、この情報がお役に立てば幸いです。

0
  1. はい。

  2. 私は認識していません。

    class属性は文字列なので、何らかの形の文字列操作がなければ何を探しているのかわかりません。

    var original = 'class1 class2 class_with_id'; 
    var newClass = 'new_class'; 
    var index = original.lastIndexOf(' '); 
    var updated = original.slice(0, index) + ' ' + newClass + original.slice(index); 
    

    class1 class2 new_class class_with_idを指定します。

    別の方法として、文字列のスプライスまたは挿入メソッドを独自に作成することもできます。

    String.prototype.insert = function (index, string) { 
        if (index > 0) 
        return this.substring(0, index) + string + this.substring(index, this.length); 
        else 
        return string + this; 
    }; 
    
    var original = 'class1 class2 class_with_id'; 
    var newClass = 'new_class'; 
    var index = original.lastIndexOf(' '); 
    var updated = original.insert(index, ' ' + newClass); 
    

注: カール・アンドレ・ギャニオンが述べたように..あなたは、あなたの現在の方法とは対照的に、カスタムデータ属性を使用したほうが良いでしょう。あなたのメソッドは、クラスを変更するプラグインを使用することを制限することがあります。

0

なぜクラスを使用しているのかよくわかりません。しかし、何らかの理由であなたが提案したようなデータを使うことができず、クラスの使用を好むと仮定すれば、簡単に呼び出すことができるようにjquery関数を作ることができます。

$.fn.addClassAt = function(index, newClass){ 
    var classArray = $(this).attr('class').split(' '); 
    classArray.splice(index, 0, newClass); 
    var newClassStr = classArray.join(' '); 
    return $(this).attr('class', newClassStr); 
} 

あなたは今

$( "#のMYELEMENT")としてこれを使用することができます。addClassAt(2 'newClass')を

関連する問題