如何在现有的<ul>中添加<li>?

我的代码看起来像这样:

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

我想使用jQuery将以下内容添加到列表中:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

我试过这个:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

但是,这增加了新li最后 li ,后不是(在结束标记之前)。 添加这个li的最佳方法是什么?


#1楼

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

#2楼

这样做:

$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

两件事情:

  • 您只需将<li>附加到<ul>本身即可。
  • 您需要使用与您在HTML中使用的相反类型的引号。 因此,由于您在属性中使用双引号,请使用单引号括起代码。

#3楼

您应该附加到容器,而不是最后一个元素:

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

append()函数应该在jQuery中被称为add() ,因为它有时会让人感到困惑。 你会认为它在给定元素之后附加了一些东西,而它实际上添加到元素中。


#4楼

代替

$("#header ul li:last")

尝试

$("#header ul")

#5楼

如果您只是在该li添加文本,则可以使用:

 $("#ul").append($("<li>").text("Some Text."));

#6楼

这是另一个

$("#header ul li").last().html('<li> Menu 5 </li>');

#7楼

jQuery带有以下选项,可满足您在这种情况下的需求:

append用于在选择器中指定的父div的末尾添加元素:

$('ul.tabs').append('<li>An element</li>');

prepend用于在选择器中指定的父div的top / start处添加元素:

$('ul.tabs').prepend('<li>An element</li>');

insertAfter允许您在指定的元素后面插入选择的元素。 然后,您创建的元素将在指定的选择器结束标记之后放入DOM中:

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore将执行与上述相反的操作:

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

#8楼

简单

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );

#9楼

这是您可以做到的最短路

list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);

数组中的块。 你需要循环遍历数组。


#10楼

您也可以采用更多“对象方式”并且仍然易于阅读:

$('#content ul').append(
    $('<li>').append(
        $('<a>').attr('href','/user/messages').append(
            $('<span>').attr('class', 'tab').append("Message center")
)));    

你不必再与引号斗争,但必须保持一丝大括号:)


#11楼

如何使用“after”而不是“append”。

$("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

“.after()”可以在匹配元素集中的每个元素之后插入由参数指定的内容。


#12楼

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

以下是有关代码可读性的一些反馈(博客的无耻插件)。 http://coderob.wordpress.com/2012/02/02/code-readability

考虑将新元素的声明与将它们添加到UL的操作分开。它看起来像这样:

var tabSpan = $('<span/>', {
    html: 'Message Center'
});
var messageCenterAnchor = $('<a/>', {
    href='/user/messages',
    html: tabSpan
});
var newListItem = $('<li/>', {
    html: messageCenterAnchor,
    "id": "myIDGoesHere"
});    // NOTE: you have to put quotes around "id" for IE..

$("content ul").append(newListItem);

快乐编码:)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以将之前提供的代码块添加到`Gethtml`方法,如下所示: ```python import requests from lxml import etree class YourClassName: def __init__(self): self.url = None self.page = 1 def Gethtml(self, i): url = 'https://www.qidian.com/rank/hotsales/chn{chanid}/page{page}/' chanid = "-1" while True: # 构造新URL new_url = url.format(chanid=chanid, page=self.page) # 发送请求并获取网页内容 response = requests.get(new_url) html = response.text # 使用XPath提取data-chanid的值 tree = etree.HTML(html) data_chanid = tree.xpath('//a[@class="act"]/@data-chanid') # 如果没有获取到data-chanid的值,说明已经到达最后一页,退出循环 if not data_chanid: break # 将data-chanid的值赋给chanid变量 chanid = data_chanid[0] # 处理网页内容... # 增加翻页计数 self.page += 1 # 在循环处理网页内容... response = self.Uresponse().content.decode() tree = etree.HTML(response) li_list = tree.xpath('//*[@id="book-img-text"]/ul/li') for li in li_list: url_list = 'https:' + str(li.xpath('./div[3]/p/a[1]/@href')[0]) self.Gettypehtml(url_list) def Uresponse(self): response = requests.get(self.url) return response ``` 在这个示例代码,`Gethtml`方法的循环部分已被替换为之前提供的代码块,并添加了对`Gettypehtml`方法的调用。通过在每次循环更新`self.page`变量,我们可以实现翻页效果。 请注意,以上代码仅提供了一个示例,你可能需要根据实际情况进行适当的调整和扩展。如果有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值