jqueryに詳しい方におたずねします。

もしも、親要素のdivである.nekoが、aを持っており、そのaが非表示にされていた場合にのみ、.nekoに指定されているpaddingをゼロにしたいという場合には、どんなセレクタ指定またはif文で、条件分岐させたらいいでしょうか。
paddingゼロでなく、removeでもよいのですが。
当方は、javascriptの文法に疎いので、よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2015/11/28 15:05:50

ベストアンサー

id:a-kuma3 No.2

回答回数4971ベストアンサー獲得回数2153

<script>$(function(){$("a:hidden").parents("li.iineListItem").css("padding", "0");})</script>
でも、できません。どうしてなのか、わかりません。

それは、『「○○」についたいいね!』のポップアップの中身は、「いいね!した人」をクリックした後に作成されているからです。
ページを読み込んだときに動くスクリプトでは消せません。

いいね一覧のポップアップが表示されるのを監視してあげる必要があります。
いわゆるモダンブラウザだけの対応になりますが、MutationObserver という仕組みで監視した場合のコードです。

$(function() {
    $("#iineEntryFrame").each(function() {
        var MutationObserver = window.MutationObserver || window.WebkitMutationObserver;
        new MutationObserver(function (records) {
            records.forEach(function (record) {
                if (record.addedNodes) {
                    Array.prototype.forEach.call(record.addedNodes, function(e) {
                        if (e.className == "iineListItem") {
                            $("a", e).each(function() {
                                if (getComputedStyle(this).getPropertyValue("display") === "none") {
                                    e.style.display = "none";
                                }
                            });
                        }
                    });
                }
            });
        }).observe(this, { childList: true, subtree: true });
    });
});

padding をゼロにしただけでは区切りの点線が残るので、.iineListItem を非表示にしています。

jQuery の :hidden セレクタでは、非表示になっていない A も拾ってきてしまったので、getComputedStyle メソッドを使って非表示かどうかの確認をしています。
非表示にする方法はいくつかありますが、CSS のルールで以下のような感じで display: none; を設定しているということを想定しています。

A[href*=block_userid] {
    display: none;
}
id:Michiko_70554148

ご協力ありがとうございます。

いただいたコードをscriptで囲んで、入れてみたのですが、余白が消えませんでした。
また、アメブロは、scriptの総文字数が3800文字しか許されていないもので、もしもいただいたコードを調整して、使えるようになったという場合でも、このコードを入れた場合には、これまでに入れてある他のなんらかのscriptのいくつかを撤去しないと、オーバーしてしまうので、現実的には、なかなかキビしいものがあります。なので、アメブロでは、scriptの外部化をしている人も、いるようなんですが、私の場合には、なるべく軽く作りたいとも思いますし、外部化まではするつもりがなく、できるだけCSSでなんとかできるように、あとは、短いjqueryで済む程度に、努力しています。
今回は結局、邪道かもしれませんが、以下のように、余白とborder-topを下位のdiv(a直下)に付け替えることで、自力解決いたしました。
.iineListItem{padding:0;border:none;}
.iineListBody{padding:8px 18px 8px 12px;border-top:dotted 1px #b3b3b3;}
.iineListImg{margin:0 12px 8px 0;}

2015/11/27 17:30:10

その他の回答1件)

id:degucho No.1

回答回数281ベストアンサー獲得回数75

いくつかやり方があり、「aが非表示にされていた場合」がどのように実現されているかにもよりますが
display:noneのクラスが指定されているアンカーからたどるやりかたで例をつくってみました
https://jsfiddle.net/u3fjwLj9/3/

他4件のコメントを見る
id:Michiko_70554148

<script>$(function(){$("a:hidden").parents("li.iineListItem").css("padding", "0");})</script>
でも、できません。どうしてなのか、わかりません。
paddingは、li.iineListItemに設定されています。

2015/11/27 05:39:31
id:Michiko_70554148

余白とborder-topを下位のdiv(a直下)に付け替えることで、自力解決いたしました。ご協力ありがとうございました。

2015/11/27 17:31:26
id:a-kuma3 No.2

回答回数4971ベストアンサー獲得回数2153ここでベストアンサー

<script>$(function(){$("a:hidden").parents("li.iineListItem").css("padding", "0");})</script>
でも、できません。どうしてなのか、わかりません。

それは、『「○○」についたいいね!』のポップアップの中身は、「いいね!した人」をクリックした後に作成されているからです。
ページを読み込んだときに動くスクリプトでは消せません。

いいね一覧のポップアップが表示されるのを監視してあげる必要があります。
いわゆるモダンブラウザだけの対応になりますが、MutationObserver という仕組みで監視した場合のコードです。

$(function() {
    $("#iineEntryFrame").each(function() {
        var MutationObserver = window.MutationObserver || window.WebkitMutationObserver;
        new MutationObserver(function (records) {
            records.forEach(function (record) {
                if (record.addedNodes) {
                    Array.prototype.forEach.call(record.addedNodes, function(e) {
                        if (e.className == "iineListItem") {
                            $("a", e).each(function() {
                                if (getComputedStyle(this).getPropertyValue("display") === "none") {
                                    e.style.display = "none";
                                }
                            });
                        }
                    });
                }
            });
        }).observe(this, { childList: true, subtree: true });
    });
});

padding をゼロにしただけでは区切りの点線が残るので、.iineListItem を非表示にしています。

jQuery の :hidden セレクタでは、非表示になっていない A も拾ってきてしまったので、getComputedStyle メソッドを使って非表示かどうかの確認をしています。
非表示にする方法はいくつかありますが、CSS のルールで以下のような感じで display: none; を設定しているということを想定しています。

A[href*=block_userid] {
    display: none;
}
id:Michiko_70554148

ご協力ありがとうございます。

いただいたコードをscriptで囲んで、入れてみたのですが、余白が消えませんでした。
また、アメブロは、scriptの総文字数が3800文字しか許されていないもので、もしもいただいたコードを調整して、使えるようになったという場合でも、このコードを入れた場合には、これまでに入れてある他のなんらかのscriptのいくつかを撤去しないと、オーバーしてしまうので、現実的には、なかなかキビしいものがあります。なので、アメブロでは、scriptの外部化をしている人も、いるようなんですが、私の場合には、なるべく軽く作りたいとも思いますし、外部化まではするつもりがなく、できるだけCSSでなんとかできるように、あとは、短いjqueryで済む程度に、努力しています。
今回は結局、邪道かもしれませんが、以下のように、余白とborder-topを下位のdiv(a直下)に付け替えることで、自力解決いたしました。
.iineListItem{padding:0;border:none;}
.iineListBody{padding:8px 18px 8px 12px;border-top:dotted 1px #b3b3b3;}
.iineListImg{margin:0 12px 8px 0;}

2015/11/27 17:30:10
id:Michiko_70554148

お二方とも、ありがとうございました。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません