Question

我是javascript / jquery的新手，但到目前为止一直没问题（虽然你不喜欢看我的代码），但是我试图剥离了一块墙来自某些HTML的样式标签我试图克隆。

克隆的原因是CMS我被迫使用（我无法访问代码，只能在顶部添加代码）自动构建顶级导航，而我想要在用户滚动时添加重复的粘性导航，但也要在滚动版本中添加几个元素。

顶级导航的原始HTML看起来有点像：

<nav id="mainNavigation" style="white-space: normal; display: block;">
    <div class="index">
        <a href="/participate/">Participate</a>
    </div>

    <div class="index" style="margin-right: 80px;">
        <a href="/news/">News</a>
    </div>

    <div class="index active" style="margin-left: 80px;">
        <a class="active" href="/about/">About</a>
    </div>

    <div class="external">
        <a href="/collection/">Collection</a>
    </div>

    <div class="index">
        <a href="/contact/">Contact</a>
    </div>
</nav>

我有轻微的成功（除了那些我要删除的样式标签）以下，尽管它似乎对我没有意义，因为我预计会重复一些元素（整个＆lt; nav＆gt; ...＆lt; / nav＆gt;标记应该在#mainNavigation克隆中，不是吗？）：

var originalNavItems = $('#mainNavigation').clone().html();
$("#site").prepend('
    <div id="ScrollNavWrapper">
        <div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
            <nav id="newScrolledNav" style="white-space: normal; display: block;">
                <div class="index home">
                    <a href="/">Home</a>
                </div>
                ' + originalNavItems + '
                <div class="newItem">
                    <a href="http://www.externalsite.com">
                        View on External Site
                    </a>
                </div>
            </nav>
        </div>
    </div>');

我试图在这里使用相关问题的一些答案，但我一直得到不正确的结果。你能救我吗？

Answer 1

您可以使用

<script>

然后您可以使用var originalNavItems = $('#mainNavigation').clone().find("*").removeAttr("style");添加该html元素

Fiddle

Answer 2

你可以像这样剥离样式元素：

var el = $('#mainNavigation'); // or whatever
el.find('[style]').removeAttr('style');

Answer 3

你可以克隆到一个虚构的div中，然后再获取false。您还可以删除样式属性。希望这对你有用......

mainNavigation

Answer 4

nav被克隆，但html()函数只返回内容的HTML，这就是它消失的原因。您可以通过直接在目标元素之前添加克隆元素来避免某些字符串操作。

$("#site").prepend('
<div id="ScrollNavWrapper">
    <div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
        <nav id="newScrolledNav" style="white-space: normal; display: block;">
            <div class="index home">
                <a href="/">Home</a>
            </div>
            <div class="newItem">
                <a href="http://www.externalsite.com">
                    View on External Site
                </a>
            </div>
        </nav>
    </div>
</div>');

$('#mainNavigation').clone()
  .find('[style]').removeAttr('style').end()
  .insertBefore('#newScrolledNav .newItem');

在上一个案例中，find('[style]')匹配具有style属性的元素。

Answer 5

我是Stack Overflow的新手（以及一般的js），所以这可能是非常糟糕的礼仪，但我似乎不小心修了它，试图调试我对@Anoop Joshi的第一个upvoted答案的实现上面给出了。请评论并告诉我，如果编辑我的问题会更好！

我决定将这个过程分解为单独的步骤 - 实际上类似于@Kiran Reddy的回应，但我还没有尝试过。

我试过了：

var styledHTML = $('#mainNavigation').clone();
styledHTML.find("div[style]").removeAttr('style');
var originalNavItems = styledHTML.html();
$("#site").prepend('<div… etc.

在每一行下面都有一个console.log（styledHTML）等，以检查我在每个阶段的内容 - 并且它有效！（代码确实如此，console.log没有＆＃t; t？）

我这样做是为了尝试在每个阶段记录变量的值，但无论我做了什么修复它......

现在我需要弄清楚为什么我甚至不能制作console.log（变量）;工作： - /

Answer 6

试试此代码

$('#mainNavigation').children().removeAttr('style');

希望这会对你有所帮助。

从jquery中的所有后代中删除style属性

6 个答案: