标签: html-lists

数字LI使用jQuery

我有一个有序列表,但我想在一个单独的span标签中手动编号而不是使用默认值list-style: decimal;

<ol>
 <li><span>1</span> item 1</li>
 <li><span>2</span> item 2</li>
</ol>
Run Code Online (Sandbox Code Playgroud)

我怎样才能使用jQuery实现这一目标?

非常感谢!

jquery numbers html-lists

1
推荐指数
1
解决办法
597
查看次数

谷歌Chrome和IE7无序列表问题

我正在设计在线简历,但在谷歌浏览器中遇到问题,ie7有无序列表.虽然它们在侧边栏中渲染得很好,但由于某种原因,在内容部分中,第一个子弹点浮动到其容器的最右侧,文本显示正常,所有其他项目符号和文本定位都很好.任何其他主流浏览器都不会发生此错误.

这是代码,以及正在发生的事情的屏幕截图.

<h2>Education</h2>
<div class="education">
    <h3>Institution Name</h3>
    <p class="date">Date 1000<br />~ Date 2000</p>
    <p class="description">Vel augue ac a adipiscing? Facilisis. Dictumst vut rhoncus ut scelerisque, duis mid! Amet ultricies parturient cursus amet? Cum, diam sed platea ultrices in, phasellus augue amet.</p>
    <ul>
        <li><span>Masters of Design</span></li>
        <li><span>fagjfjfhdgsdf</span></li>
        <li><span>Random blabble text</span></li>
    </ul>
    </div>

.education ul{margin-left:120px;}
#sidebar{}
.education ul li,
#sidebar ul li{list-style:square; font-size:18px; line-height:18px;}
.education ul li span,
#sidebar ul li span{font-size:13px; color:#3C3225;}
ul{color:#11c9c7;}
Run Code Online (Sandbox Code Playgroud)

IE7和谷歌浏览器中的错误图像

奇怪的是它在IE6和IE8中工作,所以我很困惑,因为我的编码没有我通常会有的不同,并且使用相同代码的侧边栏ul渲染得很好.有谁知道是什么原因引起的?

css google-chrome html-lists internet-explorer-7

1
推荐指数
1
解决办法
4313
查看次数

HTML:菜单作为UL而不是DIV?

我最近创建了一个网页菜单,其中按钮是DIV元素.我一直在谷歌搜索,看到很多人创建UL列表,每个按钮是一个LI元素.使用UL和LI而不仅仅是DIV有什么好处?对SEO来说有点好吗?这与"语义"标记有关吗?有任何令人信服的理由将我的菜单重写为UL吗?

html css html-lists

1
推荐指数
1
解决办法
284
查看次数

使用jquery隐藏所有li标签

请帮我完成我的代码.我想隐藏<li>身体上的所有标签.

$(document).ready(function () {
$('li > ul').hide();    
});
Run Code Online (Sandbox Code Playgroud)

请给我正确的代码变体!

javascript jquery hide html-lists

1
推荐指数
1
解决办法
4920
查看次数

迭代无序列表时跳过第一个列表项.JQuery的

我有一个无序列表,其中列表项包含图像的链接.我的代码当前遍历列表项,获取href,在div中创建一个新的图像容器banner-holder并添加src属性.

我想要做的是跳过第一个列表项,因为我已经拥有该图像banner-holder,我不想添加它两次.

谢谢.

$('li').each(function ()
    {
        var bigImage = $(this).find('a.main-img').attr('href');

        $('<img/>').attr('src', bigImage).appendTo('#banner-holder');

    });
Run Code Online (Sandbox Code Playgroud)

jquery image function html-lists

1
推荐指数
1
解决办法
4563
查看次数

HTML/CSS - 列表 - 使用列表样式时将背景颜色应用于整行?

我正在尝试重新设计我的网站菜单配置.

我使用列表来显示菜单选项,列表的样式类型为圆形.

这是一张图片:

1

以下是代码:

<li class='category'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li.listCategory {
    list-style-type: circle;
    margin-left: 17px;
}
Run Code Online (Sandbox Code Playgroud)

我想要做的是,一旦此人选择了导航菜单的这一部分,整个行将以黄色突出显示.

与此相关的所有代码都有效,但我遇到的问题是关于此行或<li>标记的样式.

我的第一次尝试会产生不良影响:

2

<li class='category' id='selectedCat'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li#selectedCat {
    background-color: #FFCC00;
    list-style-type: disc;
}
Run Code Online (Sandbox Code Playgroud)

所以我删除了类别类中设置的边距,最后结果如下:

3

请注意,现在我的漂亮列表样式也显示已选中此选项刚刚消失...

所以我基本上要做的就是设计这个区域:

4

有没有人对我如何完成这项任务有任何建议或想法?

提前感谢您花时间阅读本文!

html css styling html-lists

1
推荐指数
1
解决办法
1058
查看次数

如何使用jquery在一个页面中获取所有<li>标签的内容

我有一个像这样的HTML列表:

<li id="tag">red</li>
<li id="tag">yellow</li>
<li id="tag">blue</li>
Run Code Online (Sandbox Code Playgroud)

如何使用jQuery获取这些li标签的内容?

例如;

$tags = red, yellow, blue
Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-selectors html-lists

1
推荐指数
2
解决办法
2618
查看次数

来自一个<ul>,CSS和一些JS的多列列表

看看我的HTML代码(假设我以这种方式拥有100个链接):

< - 语言:lang-html - >

<ul>
    <li><a href="/link.html">Link1</a></li>
    <li><a href="/link.html">Link2</a></li>
    <li><a href="/link.html">Link3</a></li>
    <li><a href="/link.html">Link4</a></li>
    <li><a href="/link.html">Link5</a></li>
    <li><a href="/link.html">Link6</a></li>
    <li><a href="/link.html">Link7</a></li>
    <li><a href="/link.html">Link8</a></li>
    <li><a href="/link.html">Link9</a></li>
    <li><a href="/link.html">Link10</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

正如你所看到的那样<ul>,<li>里面有很多.

我想在页面上看起来像这样(5列):

Link1  Link3  Link5  Link7  Link9
Link2  Link4  Link6  Link8  Link10
Run Code Online (Sandbox Code Playgroud)

这个URL有类似的解释:http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/然而它导致链接的不同定位,而不是列出下来,它去了是的,所以链接最终看起来像这样:

Link1  Link2  Link3  Link4  Link5
Link6  Link7  Link8  Link9  Link10
Run Code Online (Sandbox Code Playgroud)

我没有在网站上使用任何JavaScript框架,所以我希望只使用CSS和一些独立于框架的JavaScript来完成.对此有何解决方案?

javascript css css3 multiple-columns html-lists

1
推荐指数
1
解决办法
1289
查看次数

使用javascript在ul里面有多少个li

我怎么知道li第一个里面有ul多少?

我知道我可以使用.length,但我只想要第一个ul的数量

<ul class="first-ul">
    <li>1</li>
    <li>2</li>
    <li>
        <ul class="second-ul">
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/5oykbysk/

javascript jquery html-lists

1
推荐指数
1
解决办法
2251
查看次数

Javascript:按照li中的span内容排序列表

所以我有以下列表,我想做以下事项:

  1. 如果该人有0个帖子,请隐藏li.
  2. 在帖子数量上排序列表,因此最高的是第一个.
  3. 然后只显示列表中的前4项.

清单代码:

<div id="et_authors-3" class="widget et_pb_widget widget_et_authors">
    <div class="widget_content">
        <ul class="widget_list">
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Barry White</h3>
                    <span class="post-meta">1 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Bob Marley</h3>
                    <span class="post-meta">11 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Elton John</h3>
                    <span class="post-meta">4 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Stevie Wonder</h3>
                    <span class="post-meta">5 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author">
                    <h3 class="title">Michael Jackson</h3>
                    <span class="post-meta">12 Posts</span>
                </a>
            </li>
            <li>
                <a href="https://example.com" class="widget_list_author"> …
Run Code Online (Sandbox Code Playgroud)

html javascript html-lists

1
推荐指数
1
解决办法
32
查看次数