人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: Michiko_70554148
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● degucho

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


Michiko_70554148さんのコメント
ご協力ありがとうございます。 aにはclassがついておりませんのと、clickは無関係なので、よくわかりませんでした。 非表示は、個別のurlを指定したうえで、いちいちCSSか記事エディタからdisplay:none;を指定して、非表示にしています。 scriptのほうでは、1回で済ませたいと思って、「そのclassの持っているaが非表示になっている場合には、自動的にpaddingが0になる」というふうなコードを書きたいのですが、いろいろやってみましたが、できません。

deguchoさんのコメント
実験用にボタンを押すとパディングが消えるようにしてあります。 必要なのは1行です。 ちょっと改良したのでもう一度ご確認ください

deguchoさんのコメント
こちらです。すみません https://jsfiddle.net/u3fjwLj9/14/

Michiko_70554148さんのコメント
たびたびありがとうございます。 <script>$(".iineListItem a:hidden").parents(".iineListItem").css("padding", "0");</script> 以下で、できませんでした。 どうしてできないのかも、わからず、もうお手上げです。

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

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

2 ● a-kuma3
ベストアンサー

<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;
}

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;}

質問者から

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ