jquery - 动态创建元素的样式

Question

我正在尝试做这样的事情:

假设在页面加载之前，页面的结构是这样的:

<div class="maindiv">
<div><a href="www.google.com" class="divlink">div1</a></div>
<div><a href="www.google.com" class="divlink">div2</a></div>
<div><a href="www.google.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>

现在我正在使用 jQuery 并像这样覆盖链接的 href

$('document').ready(function(){
    $('.divlink').attr('href','www.facebook.com');
});

所以加载后，页面将是这样的。

<div class="maindiv">
<div><a href="www.facebook.com" class="divlink">div1</a></div>
<div><a href="www.facebook.com" class="divlink">div2</a></div>
<div><a href="www.facebook.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>

到现在都还好。

现在当有人点击 showmore 链接时，接下来的三个元素将附加到 maindiv。此链接将被删除，并在所有六个 div 之后创建一个新的 showmore 链接。现在整个页面会是这样的:

<div class="maindiv">
<div><a href="www.facebook.com" class="divlink">div1</a></div>
<div><a href="www.facebook.com" class="divlink">div2</a></div>
<div><a href="www.facebook.com" class="divlink">div3</a></div>
<div><a href="www.google.com" class="divlink">div1</a></div>
<div><a href="www.google.com" class="divlink">div2</a></div>
<div><a href="www.google.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>

所有这些功能都是标准的，这意味着我不能做任何事情。我只能写一些 jQuery 代码来覆盖链接的 href。由于我的文档的 jQuery onready 事件，只有前三个元素的 href 将被覆盖。但我想覆盖所有将在单击显示更多按钮时生成的链接的 href。

有没有办法做到这一点？

(这只是我给你解释的一个案例，我还想再改一些CSS，有什么方法可以全部改掉吗？)

Answer 1

写在其他函数里就可以了

function somefunctiontoloadmoreitems()
{
  $('.divlink').attr('href','www.facebook.com');
}

告诉你是否想要这个？我不确定。

function appendvalues(href, classname)
{
   var maindiv = document.getElementById("maindiv").childNodes;
   for(var i=0; i<maindiv.length; i++)
   {
      maindiv[i].setAttribute("href",href);
      maindiv[i].setAttribute("class",classname);
   }

}

尝试在您的代码中实现它。