もしも、親要素のdivである.nekoが、aを持っており、そのaが非表示にされていた場合にのみ、.nekoに指定されているpaddingをゼロにしたいという場合には、どんなセレクタ指定またはif文で、条件分岐させたらいいでしょうか。
paddingゼロでなく、removeでもよいのですが。
当方は、javascriptの文法に疎いので、よろしくお願いいたします。
<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; }
いくつかやり方があり、「aが非表示にされていた場合」がどのように実現されているかにもよりますが
display:noneのクラスが指定されているアンカーからたどるやりかたで例をつくってみました
https://jsfiddle.net/u3fjwLj9/3/
<script>$(function(){$("a:hidden").parents("li.iineListItem").css("padding", "0");})</script>
でも、できません。どうしてなのか、わかりません。
paddingは、li.iineListItemに設定されています。
余白とborder-topを下位のdiv(a直下)に付け替えることで、自力解決いたしました。ご協力ありがとうございました。
<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; }
ご協力ありがとうございます。
いただいたコードを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いただいたコードを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;}