jQueryによるclassの取得方法 ※※質問内容編集中につき、ご回答はお待ちください※※

Question

###現在回答は募集しておりません。m(_ _)m

※※※※※※※※※※※※※※※※※※※※※※※※※
自身の質問内容が不明瞭でした。
ご回答頂く前に一度整理して出直したいと思います。
ご迷惑おかけし大変申し訳ございません。
※※※※※※※※※※※※※※※※※※※※※※※※※

###以下、元の質問文です
押したボタンに応じて表示を切り替えたいです。

次のHTMLで、たとえば『3』を入力して「btn_a」を押したときに、後述するような処理で表示を切り替えることはできますか？

<div>
	<input type="text" id="inputpoint" name="points">
</div>

<div class="multi_list">
  <span id="multi_a">22</span>
  <span id="multi_b">33</span>
</div>

<div class="flex">
  <div class="btn_a">ボタンa</div>
  <div class="btn_b">ボタンb</div>
</div>

<table>
  <tbody>
    <tr>
      <td class="apple num_a a10">a10</td>
      <td class="apple num_a a12">a12</td>
      <td class="apple num_a a19">a19</td>
      <td class="grape num_a a20">a20</td>
      <td class="grape num_a a24">a24</td>
      <td class="grape num_a a28">a28</td>       
      <td class="banana num_b b62">b62</td>
      <td class="banana num_b b67">b67</td>
      <td class="banana num_b b69">b69</td>     
    </tr>
  </tbody>         
</table>

『3』を入力して「btn_a」を押したときにやりたい処理、というのは次のような経緯です。
【.aXX についての処理】と【.bXX についての処理】があります。

---

【.aXX についての処理】

➀.num_a をもつtdを探す。
→.appleのtdが３つ、.grapeのtdが３つ判明。

➁「.apple に属する.aXX」と「.grapeに属する.aXX」を整理する。
→「.a10 .a12 .a19 」「.a20 .a24 .a28」

➂その中から、『3』（入力した値）の次に大きい数を取得する。
→「10」「20」

➃それらの.aXX 表示する。
→.a10 {display:table-cell;}
→.a20 {display:table-cell;}

➄他を非表示にする。
→.a12 {display:none;}
→.a19 {display:none;}
→.a24 {display:none;}
→.a28 {display:none;}

---

【.bXX についての処理】

➀.num_b をもつtdを探す。
→.bananaのtdが３つ判明。

➁「.banana に属する.bXXを整理する。
→「.b62 .b67 .b69 」

➂その中から、『66』（入力した『3』に#multi_aの値を掛けた数）の次に大きい数を取得する。
→「67」

➃その.bXX 表示する。
→.b67 {display:table-cell;}

➄他を非表示にする。
→.b62 {display:none;}
→.b69 {display:none;}

Comments

[defghi1977]

point=10の時はどうするん？

[退会済みユーザー]

ご指摘ありがとうございます。これでは10が抜けてしまいますもんね。質問文を修正いたしました。

[defghi1977]

なんとなくやりたいことは判る. しかし答える気力が無い. else if と境界条件についてもう一度理解し直して下さい.

[Dot]

200だとapple .a1000が grapeで消えてしまうのを何とかしたいという事？bananaが死んじゃうのもそれじゃない？

[x_x]

わたしにはまるで意味が分かりませんでした

[退会済みユーザー]

失礼いたしました。下手なjqueryを書いていたことが余計に混乱を招きました。内容を整理して質問文を修正しておきました。お手すきの折にご覧いただけたら幸いです。よろしくお願いいたします。

[defghi1977]

もう考えたくないからどうとでも

[退会済みユーザー]

defghi1977さん、丁寧に返答しておりましたけれど、いつもそのようなご対応では悲しくなります。二度とお答えいただかなくて結構です。もすこし我慢強くなると良い人生になるかもしれません♪

[defghi1977]

> defghi1977さん、丁寧に返答しておりましたけれど、いつもそのようなご対応では悲しくなります。二度とお答えいただかなくて結構です。もすこし我慢強くなると良い人生になるかもしれません♪ わかりました. コメントは残させていただきます.

[退会済みユーザー]

んっと？コメントを残す？消す？はい。どちらでも、まったくかまいませんよ？お互いにいつかこのページを見返したとき、思い返したときに、「あちゃちゃ恥ずかしいやりとりをしてしまったな」とほほえましく眺めることができるときが来るように、精進しましょう(^_-)-☆それでは。さようならです。

[defghi1977]

>んっと？コメントを残す？消す？はい。どちらでも、まったくかまいませんよ？お互いにいつかこのページを見返したとき、思い返したときに、「あちゃちゃ恥ずかしいやりとりをしてしまったな」とほほえましく眺めることができるときが来るように、精進しましょう(^_-)-☆それでは。さようならです。

[退会済みユーザー]

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11188748376 こちらと同件でしょうか。teratailではマルチポストは推奨されていないので、適切な運用をお願いします。（誤字訂正）

[退会済みユーザー]

defghi1977さん、あ、失礼しました。ご自身のコメントを反省し、「戒めのためのために消さずに残しておきます」という意味かと思ってしまいました。そうではなくて、私のコメントを保管してくださったのですね（？？なぜ？なにをなさってるんですか？？）

[退会済みユーザー]

mizさん、HTMLはコピーしましたけれど、内容はかなり違うものだと思うのですが…まぁ、お感じになられたという点は留意しておきますです。

[HayatoKamono]

質問の前提として、そもそも、これは何の機能なのですか？num_aやmulti_aやa_xxxやbananaなどクラス名がありますが、これらは何を意味したものなのですか？質問の立ち位置が「機能Aを実装する私が考えた方法をより上手くやる方法を教えてください」というものだと思いますが、そもそもの「その私が考えた方法」が何やら複雑で小難しいことをやろうとしているようなので、機能Aが何なのか、また、どういったデータを扱うのかを説明し、その機能をシンプルに上手く実装する方法から回答を募った方が良さそうな気がします。

[退会済みユーザー]

ご指導ありがとうございます。おっしゃるとおりでした。私自身整理できておりませんでしたので、勝手ながらひとまず回答の募集をとじさせて頂きました。よく考えてから出直してまいります。

[m.ts10806]

削除依頼を出して運営に削除してもらうか、自身で回答を書いてベストアンサーを選ぶことでしか閉じることはできません。冒頭のあの文章は何の意味もありませんし、見ている人にとってノイズにしかなりません。自分ルールを通すのではなく、サイトのルールに従いましょう。

[退会済みユーザー]

mts10806さん、仰るとおりですね。ありがとうございます。

[退会済みユーザー]

削除方法って、問い合わせページ（https://teratail.com/contact/input）しかありませんよね？

[m.ts10806]

https://teratail.com/help/delete-policy　読んだら分かりますが、回答がついているので削除依頼はできません。回答者と質問者の喧嘩が勃発していて閲覧者から通報があるような形で余程荒れていれば別ですが、今回ではそのケースには当たりません。何かしら整理して出直すのであればその旨を自身で回答に記載し、その回答をベストアンサーとすることでいったん解決済みとすべきです。

[退会済みユーザー]

読んだらわかりますね笑。ありがとうございます。

[m.ts10806]

説明書は一通り読むべきです。https://teratail.com/help ここから。

Answer 1

回答者さんの目に止まるのを避けるため、いったん解決済みとさせて頂きます。ご迷惑をおかけし大変申し訳ございません。

Comments

[x_x]

終了したのであれば、「※※質問内容編集中につき、ご回答はお待ちください※※」は削除したほうがいいのではないでしょうか？
ずっと待っていることになります。

Answer 2

こんばんは

ご自身でお書きになったJQueryコードありますか？
あればちょっと拝見させて頂きたいのですがよろしいでしょうか？
ご自身で書かないで人任せにしてしまうと回答は荒れてしまいますよ。
あと、過去質問拝見させて頂きましたが過去に回答して頂いた方に思い通りの回答を頂けなかっただけで投げやりなコメントをするのは如何なものかと私は思いました。

Comments

[退会済みユーザー]

おはようございます。jQuery質問編集前にあったのですけれど、ちょっといったん質問内容を整理してきたいと思います。ご回答の募集をいったん止めさせてくださいませ。アドバイスありがとうございます。

Answer 3

一括というのがどの程度かわかりませんが、こんな感じではどうでしょうか？

ただし前提として、tdの10,12,19はソート済みであることが条件になります。

クラスにデータを持たせずにカスタムデータ属性使えばそのまま数字として利用できるので
こちらのほうが良いかと、とりあえず下記HTMLには クラスにapple num_a a10 を残しましたが
apple以外はこの判定には不要ですね、残りのbanana, grapeの実装は同じようにできると思います。
【追記】input の値については下記の例で省きましたが適切なに取得してください。

<table>
  <tbody>
    <tr>
      <td class="apple num_a a10" data-num-a="10">a10</td>
      <td class="apple num_a a12" data-num-a="12">a12</td>
      <td class="apple num_a a19" data-num-a="19">a19</td>
    </tr>
  </tbody>         
</table>

var apples = $('td.apple');
var isNotFoundApple = true;
var inputValue = 11;

apples.each((index,elem) => {
  if (isNotFoundApple && $(elem).data('num-a') > inputValue) {
    $(elem).css('display', 'table-cell');
    isNotFoundApple = false;
  } else {
    $(elem).css('display', 'none');
  }
});

Comments

[退会済みユーザー]

的を得ない質問内容にもかかわらず、このようなご回答を頂戴できて感謝です。少し思っていたのとは違いますけれど、HTMLにカスタムデータ属性というのがあることをはじめて知りました。よいヒントを誠にありがとうございます。検索して出直してきたいと思いますので、ご回答の募集はいったんとじさせてくださいませ。

Answer 4

最初の状態のjavascriptなら
ボタンを押した後
最初に

$("td").css("display","none");

で全部消して
ifelse ifとかで表示していくみたいなので行けます

一括は可能ですがかなり難しいです

Comments

[退会済みユーザー]

ありがとうございます。実は「入力値以上で最も近いクラスを表示」などの経過が質問の目的なのです。その経過が必要なHTMLなのです。

というのは、「,a10」や「,a12」などのクラスはtdごとに無数にあるために、最初の状態のjavascriptのように一つずつ指定してifで分ける方法ではﾁｮｯﾄやってられないわけです（笑）。

そこで、「入力値以上で最も近いクラスを探す」という方法があったらいいなと考えたんですね。

（3を入力したら、それ以上で最も近いクラスである.a10を表示する。13を入力したらそれ以上で最も近いクラスであるa19を表示する。などです。）

質問ではかなり簡略化して載せていますので、astさんのようなご回答は至極ごもっともだと思います。せっかくお答えいただいたのに、申し訳ございません。

非表示にするだけ、クラスを取得するだけ、取得したクラスの数字部分を取り除くだけ、などならばなんとかできたのですが、質問にあるような経過がなかなかどうしてもできずに、質問させて頂いた次第です。

ご回答、ありがとうございます。