質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

873閲覧

要素内の複数あるclassの中から必要なものだけを削除、もしくはclass名を置き換えたい

bravo

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/11/14 08:36

編集2019/11/14 09:26

タイトルの通りです。

html

1<div class="test t1 test-item-1"> 2<div class="test t3 test-item-3"> 3<div class="test t8 test-item-5"> 4<div class="test t2 test-item-1">

例えば上記のように要素が並んでいた場合

javascript

1var test= $(".test"); 2for(var i in test){ 3//ここで変更したい 4}

このように"test"classを全て取得したあと、"test-item-*"classのみをすべて"test-item-2"などに書き換えたい場合、どう書くのが簡潔なのでしょうか?

追記:申し訳ありません。書き方が悪かったので例のコードを変更しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

もし for を回す事が必須でなければ
.test がついた DIV の class を全部カットしたうえで、class を付け直すのが最も簡潔かもしれません。

HTML

1<div class="test test-item-1"></div> 2<div class="test test-item-3"></div> 3<div class="test test-item-5"></div> 4<div class="test test-item-1"></div>

jQuery

1<script> 2$(function(){ 3$('.test').removeClass().addClass('test test-item-2'); 4}); 5</script>

投稿2019/11/14 09:25

iss

総合スコア506

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iss

2019/11/14 10:11

簡潔にというから頑張ったのに!w ちなみに追記に対応して簡潔に書くとこんなんなります。 $('.test').removeClass(function(index, className) {return (className.match(/test-item-\S+/g) || []).join(' ')}).addClass('test test-item-2'); はじめの投稿ではclass全消ししてたところを正規表現でtest-item-を含むclassだけ判別して消して削除。
guest

0

jQuery

1test.each(function(index, element) { 2 element.className = 'test test-item-2'; 3});

https://developer.mozilla.org/ja/docs/Web/API/Element/className

投稿2019/11/14 09:17

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

ちゃんとやるならこんな感じです

javascript

1<script> 2$(function(){ 3 $(".test").each(function(){ 4 var cl=$(this).prop('classList'); 5 for(var i=cl.length-1;i>=0;i--){ 6 var c=cl.item(i); 7 if(/^test-item-[^2]/.test(c)) cl.replace(c,'test-item-2'); 8 } 9 }); 10}); 11</script> 12<div class="test t1 test-item-1">a</div> 13<div class="test t3 test-item-3">b</div> 14<div class="test t8 test-item-5">c</div> 15<div class="test t2 test-item-1">d</div> 16<div class="test tx">e</div> 17<div class="test ty test-item-3 test-item-4">b</div> 18

投稿2019/11/14 09:29

編集2019/11/14 09:31
yambejp

総合スコア114784

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問