使用jQuery隔离网页上的元素

时间:2015-05-06 19:50:31

标签: jquery

我为自己创建了一个Firefox插件,以便在http://www.reddit.com/r/thebutton查看按钮。 我想要的只是按钮是显示的唯一元素。我想要的只是按钮形式是显示的唯一形式。这是我能找到使用jQuery隔离按钮的唯一方法。我觉得这样做是错误的,并且如果有正确的方法,我很好奇。

$('#header').remove();
$('.side').remove();
$('.footer-parent').remove();
$('#siteTable').remove();
$('#progressIndicator').remove();
$('.debuginfo').remove();
$('section').remove();
$('.content').css({"margin" : "auto"});

2 个答案:

答案 0 :(得分:1)

你可以做这样的事情

var previews = $("#previews");
// append `img` element "preview" of single , multiple
// selected `files` to `#preview` element
$("input[type=file]").on("change", function(e) {
  previews.empty();
  Array.prototype.slice.call(e.target.files)
    .forEach(function(file, idx) {
      var reader = new FileReader();
      reader.onload = function(event) {
        $("<span />", {
            "html": "<br />" + file.name
          }).add("<br />")
          .add(
            $("<img />", {
              "src": event.target.result,
              "class": idx
            })).appendTo(previews);
      };
      reader.readAsDataURL(file);
    });
});

您也可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <input type="file" accepts="image/*" multiple="true" /> <div id="previews"></div>

BTW不完全确定它是否是跨浏览器。

第一行将表单移动为正文的直接子项。第二行隐藏/删除正文中不是表单的所有其他元素。

不知道为什么我使用insertAfter而不是prepend / append但我修复了它。

答案 1 :(得分:1)

你可以这样做

$('.thebutton-form').prependTo('body');
$('body').children().not('.thebutton-form').hide(); // or remove()

这会将按钮附加到文档的开头并隐藏或删除其余内容

此解决方案不依赖于#header