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

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

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

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

jQuery

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

Q&A

0回答

733閲覧

動的にタグリストを取得している上で、それらのリストにカレント表示のためにクラスを追加するということはできますか?

raika

総合スコア0

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2021/05/10 04:27

Tumblrのカスタマイズをしています。
ページ内のタグメニューのカレント表示をしたいのですが、検索して出てくる
JQueryなどを使った方法ではすべてうまく行かず、困っています。
まったくの素人なのでよくわからないのですが、タグリスト自体が動的に
情報を取得して表示しているため、検索で出てくる方法では難しいのかなと思いました。
表示されたタグリストのliに、さらにJSで「.active」などのクラスを追加する、ということはできるのでしょうか?

【HTML】

<div class="tag-list"> <ul id="tags" class="tagCloud"></ul> </div> <script src="●●/tumblrposts.js"></script> <script> $(document).ready(function(){ (function() { var posts = new TumblrPosts({ domain: location.host, maxNum:300 }); posts.bind(posts.EVENT_COMPLETE, function(e) { var that = this; $.each(this.getTags(), function(i, tag) { var html = '<li class="level' + (tag.count % 6 + 1) + '">' + '<a href="/tagged/' + tag.name + '">' + tag.name + '</a></li>'; $(html).appendTo($("ul#tags")); }); }); posts.run(); })(); }); </script>

【タグ表示用JSの中身(tumblrposts.js)】

/** * TumblrPosts * * @class * @constructor */ var TumblrPosts = function(option){ this.option = $.extend({}, this.option); this.config(option); this.$ = $(this); this.on(this.EVENT_COMPLETE, $.proxy(this._createTagData, this)); } ; (function(fn, $){ fn.EVENT_COMPLETE = "complete"; fn.EVENT_PROGRESS = "progress"; fn.option = { url : "/api/read/json/", restPath : "/api/read/json/", domain : null, maxNum : 0 }; fn.$ = null; fn.offset = 0; fn.step = 50; fn.posts = []; fn.tags = []; /** * Config * - pass the string name to get the value * - pass the object to set the value * - pass none to get the all values * - if arg has "domain", "url" will be updated * * @param String|Object arg (optional) */ fn.config = function(arg){ if(typeof arg === "undefined"){ return this.option; } else if(typeof arg === "string"){ return this.option[arg]; } else if(Object.prototype.toString.call(arg) === "[object Object]"){ $.extend(this.option, arg); if("domain" in arg && this.config("domain")){ this.config({ url : "//" + this.config("domain") + this.config("restPath") }); } } return this; }; /** * Aliase to jQuery.fn.on() */ fn.on = function(){ this.$.on.apply(this.$, arguments); }; fn.bind = fn.on; /** * Aliase to jQuery.fn.off() */ fn.off = function(){ this.$.off.apply(this.$, arguments); }; fn.unbind = fn.off; /** * Aliase to jQuery.fn.trigger() */ fn.trigger = function(){ this.$.trigger.apply(this.$, arguments); }; /** * Start to load files by API */ fn.run = function(data, status){ var i, post; if(! data){ this.posts = []; this.tags = []; } else { if(data.posts.length){ for(i=0; i<data.posts.length; i+=1){ if(this.posts.length >= this.config("maxNum")){ this.trigger(this.EVENT_COMPLETE); return; } post = data.posts[i]; this.posts.push(post); if(post.tags){ this.tags = this.tags.concat(post.tags); } } } else { this.trigger(this.EVENT_COMPLETE); return; } this.offset += this.step; this.trigger(this.EVENT_PROGRESS); } $.ajax({ url : this.option.url, data : { start : this.offset, num : this.step }, dataType : "jsonp", success : $.proxy(this.run, this) }); return this; }; fn._createTagData= function(){ var i, data, tag; data = {}; for(i=0; i<this.tags.length; i++){ tag = this.tags[i]; data[tag] = data[tag] ? data[tag] + 1 : 1; } this.tags = []; for(i in data){ this.tags.push({ name : i, count : data[i] }); } }; /** * Get the posts * * @param Number offset (optional) * @param Number count (optional) * @return Array */ fn.getPosts = function(offset, count){ var i, posts = []; offset = offset || 0; count = count || 10; $.each(this.posts, function(i, post){ if( i < offset ){ return; } if( i >= offset + count ){ return false; } posts.push(post); }); return posts; }; /** * Get the tags * * @param String order (optinal) * @return Array */ fn.getTags = function(order){ var tags = this.tags; if(order){ tags.sort(function(a, b){ if(order === "asc"){ return a.count - b.count; } else if(order === "desc"){ return b.count - a.count; } }); } return tags; }; /** * Get the title string from post object * * @param Object post * @param Number count (optional) * @return String */ fn.getTitleByPost = function(post, count){ var title = post["regular-title"] || post["photo-caption"] || post["video-caption"] || post["regular-body"] || post["type"] || "" ; title = title.replace( /\<.+?\>/gi, "" ); title = ( count ) ? title.substr( 0, count ) : title; return title; }; }(TumblrPosts.prototype, jQuery));

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問