javascriptでの(-)ハイフンの処理方法について

お世話になります。

下記サイトについてなのですが、
http://kachibito.net/snippets/display-only-first …

例えば<div class="news">の箇所を<div class="news-abc">や<div class="news-abc-def">のようにハイフンを付けたときjavaの書き方はどのようにしたら良いのでしょうか？

分かります方がおられましたら宜しく回答お願い致します。

質問者からの補足コメント

• yambejp様
  >普通に$('.new-abc')とかけますよね？
  これだとサイトが動作しないのです。

    補足日時：2016/11/11 17:10

No.3 ベストアンサー 回答者： yambejp 回答日時： 2016/11/11 17:36

普通に動きましたよ、単に抜けがあるのでは？

<style>
div{
width:200px;
height:50px;
margin-bottom: 15px ;
background: #91d2d0 ;

}
</style>

<script src="js/jquery.js"></script> <!--ライブラリを指定してください-->
<script>
$(function(){
var news = 2;
hidenews = "- 表示を隠す";
shownews = "+ 残りを表示する";
$(".archive").html( shownews );
$(".news-abc:not(:lt("+news+"))").hide();
$(".archive").click(function (e) {
e.preventDefault();
if ($(".news-abc:eq("+news+")").is(":hidden")) {
$(".news-abc:hidden").show();
$(".archive").html( hidenews );
} else {
$(".news-abc:not(:lt("+news+"))").hide();
$(".archive").html( shownews );
}
});
});
</script>
<div class="news-abc">div 1</div>
<div class="news-abc">div 2</div>
<div class="news-abc">div 3</div>
<div class="news-abc">div 4</div>
<div class="news-abc">div 5</div>
<div class="news-abc">div 6</div>
<a class="archive" href="#"></a>

この回答へのお礼

ご丁寧にソースを書いて頂き有り難うございます。
私の場合、
var news = 2;
hidenews = "- 表示を隠す";
shownews = "+ 残りを表示する";
の箇所もnews-abcとしてしまったのが問題だったようです。
おかげさまで助かりました。

お礼日時：2016/11/11 19:15

No.2 回答者： fujillin 回答日時： 2016/11/11 17:26

こんにちは

class="news-abc"やclass="news-abc-def"の要素も同列に扱いたいというご質問でしょうか？

通常、同じ表示や同じ振舞いをする要素に同じクラス名を用います。
（クラスはそのためにあると言ってもよろしいかと思います）
それなので、その中をさらに分けたいのであれば、別のクラス名を用いて、class="news abc"やclass="news abc-def"又はclass="news abc def"などとしておけば、ご質問のようなことは発生しないのではないかと想像します。
CSSのセレクタで一括指定するような場合でも、上記のようにしておけば問題なくできますよね？

無理やりやるなら、例えば『class属性がnewsで始まるDIV要素』という指定で
　$("div[class^='news']")
のような指定方法で可能です。

例えば、
　$(".news:not(:lt(" + news + "))").hide();
の部分を
　$("div[class^='new']:not(:lt(" + news + "))").hide();
に変えれば、クラス名が違っても同様の動作になります。
（スクリプトの後半も同様に修正の必要があります）

ただし、上記は『class属性がnewsで始まる』という条件でセレクトしていますので、class="hoge news-abc"などの要素は選択されません。
このような要素でもきちんと選択したい場合は、クラス属性全体を調べることで可能ではありますが、記述がさらに複雑になりますし、最初に書きましたように、本来想定されている使い方から離れていっているように思います。

できるだけ、CSSのセレクタでも指定可能な設定になさっておくことをお勧めします。


※ あと、javaではなくてjavascriptですね。（別物です）

この回答へのお礼

ご丁寧に説明いただき感謝しております。
大変勉強になりました。
>あと、javaではなくてjavascriptですね。（別物です）
昔、何処かの質問板でも似たようなこと書いて怒られたことがあります。
以後気をつけます。
ありがとうございました。

お礼日時：2016/11/11 19:19

No.1 回答者： yambejp 回答日時： 2016/11/11 16:13

参照の仕方ですか？

普通に$('.new-abc')とかけますよね？