Translate

BTemplates.com

Powered by Blogger.

2019年8月21日水曜日

2019-08-09 08-17 08-20 08-21 到達点メモ


今回は、沢山ある<li>の中から<h3>のデータを取得し
その中でNGワードがあるものを非表示にするやり方

$ ('li').each (function (index, val) {
var tempDOM = $ (val);
var tempRegExp = new RegExp ('NGワード|禁止ワード');
var searchText = tempDOM.find ('h3').text ();
if (searchText && searchText.match (tempRegExp)) {
var searchID = tempDOM.attr ('search_id');
var hiddenElem = $ ('[search_id="' + searchID + '"]');
hiddenElem.attr ('hidden', true);
}
});

まず、$ ('li').eachで<li>のデータを取得できるようにし
これは、そのままだとhtmlデータが入ったテキストのままようなので
これを以下のようにセレクタにしてあげます。
var tempDOM = $ (val);

◆参考サイト
jQueryのeach()メソッドの基本的な使い方
jQueryのセレクタ解説 - SMART 開発者のためのウェブマガジン


matchで使うようにRegExpを作ります。そのまま書いてもいいのですが
今後、NGワードが増えていくのでこちらの方が見やすいと思ったので
こういう形にしました。
var tempRegExp = new RegExp ('NGワード|禁止ワード');

◆参考サイト
【JavaScript】~を含むかのチェック - Qiita


次にtempDOMのh3タグを見つけたいので、findで検索します。

今回は、構造上非表示にしたい<li>タグにsearchIDという属性があったので
これで対処しましたが、場合によっては他の方法を考える必要があります。
なお、searchIDのデータを取得したい場合は、以下のように指定します。
var searchID = tempDOM.attr ('search_id');

◆参考サイト
jQuery 属性値を取得/設定するサンプル(attr) | ITSakura
.attr() | jQuery API Documentation

属性の値で検索したいので以下のように設定します。
var hiddenElem = $ ('[search_id="' + searchID + '"]');

◆参考サイト
【jQuery】data属性に特定の値を持つ要素を指定する方法。


対象のliを非表示にしたいので以下のように設定します。
hiddenElem.attr ('hidden', true);

◆参考サイト
HTMLタグにhiddenを付ければ内容を非表示にできる | iwb.jp

*jQueryで、フォームに入力された値を取得したい場合

//間違い
$ ('.hogehoge_get_form_text').text ();

// 正解
$ ('.hogehoge_get_form_text').val ();

◆参考サイト
jQuery: フォーム要素からの入力値を取得するには?(val) - Build Insider


*jQueryで、labelの属性forを指定したい場合

$ ('label[for="hogehoge_point_label_for"]')

◆参考サイト
javascript-jQueryラベルの'for'属性セレクタ - コードログ

Ajax.getでURLからデータを取得しようとしたところ、コンソールログで以下の様なエラーが出た
jquery.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://HogeHoge.JP with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

今一状況は飲み込めていないのだが、意図しないアクセスを防ぐために
クロスドメインという仕様があるらしい。
ただ、MDNの方を読む限りでは、オリジン間リソース共有というのが正しい単語のように思える。うーん・・・。

◆参考サイト
オリジン間リソース共有 (CORS)  by Mozilla Contributors is licensed under CC-BY-SA 2.5.
JavaScript のクロス ドメイン (Cross-Domain) 問題の回避と諸注意 - tsmatz
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. が出る。 - ミノタケ日記。
Cross-Origin Resource Sharing(CORS)を使用したHTTPリクエスト | 69log
An In-depth Look at CORS ー SitePoint

◆リクエストを調べる際に参考にしたサイト
cURLコマンドでレスポンスヘッダのみを取得する - Qiita

色々模索してみましたが正直よくわからねぇ・・・。
ただ、今回のケースでいえば、Chromeの仕様の影響が大きい様だったので
起動オプションで無効化のコマンドを使った方が解決として早かったです。

◆参考サイト
クロスドメイン制約を回避するChromeショートカットを作る - Qiita


チェックボックスにチェックを入れたい場合は、以下のようにする
$ ('input[type=checkbox][name=test_is_checkbox]').prop (
     'checked',
      true
 );
チェックを外したい場合は、trueをfalseに変えればよい。

ラジオボタンでチェックを入れる場合は、propでやったほうが良い。
何故かというと、以下のようにvalueの値が数字でない場合があるから。

$ ('[name=test_user_status][value=nononaga]').prop ('checked', true);

◆参考サイト
【jQuery】フォーム部品の取得・設定まとめ - Qiita

正規表現で特定文字列から一番最後まで削除したい場合は以下のように書く
今回はURLのパラメータやプロパティを削除したい時に利用した

url = url.replace (/(#.*$)|(\?.*$)/, '');

◆参考サイト
<a>: アンカー要素  by Mozilla Contributors is licensed under CC-BY-SA 2.5.
正規表現:「行頭」「行末」の表現と、応用例 | WWWクリエイターズ


ボタンクリックを使いたいと思っていたが、思った以上に実装が簡単だった。
$('#buttonID').click();

◆参考サイト
【jQuery】イベント発火方法 - Qiita

お蔭で今やっている作業がかなり楽になった上に早くなった。
今までだと登録する内容が良くて頑張れば一時間に20件登録が間に合うかどうかなのに
今だと少し気を抜いてやって50分くらいで20件登録できるようになった。
プログラミングで感動したのはかなり久しぶりかもしれない・・・。

今日はここまで

0 コメント:

コメントを投稿