标签: html-lists

使用jquery匹配类

我有两个无序列表,有点像:

<ul class="list1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="current">Item 4</li>
    <li>Item 5</li>
</ul>

<ul class="list2">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

目标是,使用jquery,识别哪个li用'current'类标记,然后在第二个列表中添加一个类到相应的li.我只是想不出怎么做.

谢谢.

javascript jquery html-lists

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

随机化无序列表

可能重复:
javascript - 随机HTML列表元素顺序

经过一点点帮助.事情相当简单,但似乎无法找到自己做的事情.

我有一个动态无序列表是从一些后端代码生成的(不在我的控制之下).该列表可以是9个标签到100多个标签之间的任何内容.它们按照后端代码定义的顺序返回.使用jQuery/javascript我希望能够随机化li标签的顺序而不重复它们.

我的列表目前看起来像这样:

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

javascript jquery html-lists

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

使用CSS设置后一个和后一个<li>标签的样式

有没有办法<li>使用CSS设置最后和第二个标签的样式.我尝试使用ul li:nth-child(6)并给了padding-top:10px;它,但填充顶部正在改变所有菜单.

<ul>
    <li><a href="#"><span>Menu 1</span></a></li>
    <li><a href="#"><span>Menu 2</span></a></li>
    <li><a href="#"><span>Menu 3</span></a></li>
    <li><a href="#"><span>Menu 4</span></a></li>
    <li><a href="#"><span>Menu 5</span></a></li>
    <li><a href="#"><span>Menu 6</span></a></li>
    <li><a href="#"><span>Menu 7</span></a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

有没有其他方法可以解决这个问题,或者我在CSS中遗漏了什么?对你的帮助表示感谢!

谢谢

css css-selectors css3 html-lists

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

json嵌套无序列表

我试图将JSON转换为jQuery中的无序列表.这是我的JSON数据.

var myJSON = "{name:\"Director\",children:[name:\"Exe Director1\",name:\"Exe Director2\",name:\"Exe Director3\",children:[name:\"Sub Director1\",name:\"Sub Director2\",name:\"Sub Director3\",children:[name:\"Cameraman 1\",name:\"Cameraman 2\"]]]}";
Run Code Online (Sandbox Code Playgroud)

预期的产出是

<ul>
    <li>Director
        <ul>
            <li>Exe Director 1</li>
            <li>Exe Director 2</li>
            <li>Exe Director 3
                <ul>
                    <li>Sub Director 1</li>
                    <li>Sub Director 2</li>
                    <li>Sub Director 3
                        <ul>
                            <li>Cameraman 1</li>
                            <li>Cameraman 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我该如何解决这个问题!

干杯,

html jquery json html-lists

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

Foreach导致编号格式

我正在使用编码器,并且我从数据库中显示soms结果.使用PHP显示结果如下:

 <?php
        if(isset($foo)){
            foreach($foo as $bar){ ?>
            <ol><li>
                <div class="results">  
                    <p class="name"><?php echo $bar['name']; ?></p>
                    <p class="address"><?php echo $bar['address']; ?></p>
                    <p class="address"><?php echo $bar['postcode']; ?></p> 
                    <span><?php number_format($bar['miles'],3) ?></span> miles               
                </div>
            </li></ol>  
            <?php
          }
        }
        ?>
Run Code Online (Sandbox Code Playgroud)

我也尝试将课程'结果'添加到ol li.results并且没有运气.添加了边框,边框包裹每个结果,所以我知道我的标签是在正确的位置.CSS:

ol li {
    border:1px solid red;
    list-style-type: decimal;
}
Run Code Online (Sandbox Code Playgroud)

在reset.css我有这个:

loads...of...elements including ul, ol and li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
Run Code Online (Sandbox Code Playgroud)

我从中移除了ol,li并且我得到了数字,但是每个结果都有1.而不是1,2 3

这些显示为地址列表,我想让它们编号,所以第一个将有1.RESULT 1,2.RESULT 2等等...我试图使用有序列表标签,似乎没有显示有关数字.我已经检查了萤火虫,并且标签正在为每个人开火.这是一个CSS问题还是PHP显示结果的方式?

任何帮助将非常感激.

css php foreach html-lists

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

隐藏数组到ul li列表

所以我有一个文件路径,看起来像这样的文件路径. ./CatDV/S1/SFX/steam/6004_90_04 LargeHeadlightSm.wav ./CatDV/S1/SFX/steam/AirHissPressureRe HIT032001.wav ./CatDV/S1/SFX/steam/Impact_Metal_Bullet_Hit(1).wav ./CatDV/S1/SFX/steam/Impact_Metal_Bullet_Hit.wav ./CatDV/S1/SFX/steam/6004_94_02 LargeHeavyGlassS.wav ./CatDV/S1/SFX/steam/Impact_Glass_Smash.wav ./CatDV/S1/SFX/steam/AirReleaseHeavyAi HIT030701.wav ./CatDV/S1/SFX/steam/SDR02_15SCIF RhythmicRever.wav ./CatDV/S1/SFX/steam/VAL02_08CRSH GlassBreaking.wav ./CatDV/S1/SFX/steam/AirReleaseLargeAi HIT030601.wav ./CatDV/S1/SFX/steam/SDR02_14SCIF Rhythmic3Beat.wav ./CatDV/S1/SFX/steam/6004_94_01 LargeGlassSmash.wav

我想将所有这些分成ul li list.so

> CatDV
    > S1
        > SFX
            > steam
                > filename.extension
Run Code Online (Sandbox Code Playgroud)

等等...

这是我正在使用的阵列.我用以下功能输出了这个.

array(1) {
  [""]=>
  array(1) {
    ["CatDV"]=>
    array(1) {
      ["S1"]=>
      array(1) {
        ["SFX"]=>
        array(1) {
          ["steam"]=>
          array(12) {
            ["6004_90_04 LargeHeadlightSm.wav"]=>
                string(52) "./CatDV/S1/SFX/steam/6004_90_04 LargeHeadlightSm.wav"
            ["AirHissPressureRe HIT032001.wav"]=>
                string(52) "./CatDV/S1/SFX/steam/AirHissPressureRe HIT032001.wav"
            ["Impact_Metal_Bullet_Hit(1).wav"]=>
                string(51) "./CatDV/S1/SFX/steam/Impact_Metal_Bullet_Hit(1).wav"
            ["Impact_Metal_Bullet_Hit.wav"]=>
                string(48) "./CatDV/S1/SFX/steam/Impact_Metal_Bullet_Hit.wav"
            ["6004_94_02 LargeHeavyGlassS.wav"]=>
               string(52) "./CatDV/S1/SFX/steam/6004_94_02 LargeHeavyGlassS.wav"
            ["Impact_Glass_Smash.wav"]=>
               string(43) "./CatDV/S1/SFX/steam/Impact_Glass_Smash.wav"
            ["AirReleaseHeavyAi HIT030701.wav"]=> …
Run Code Online (Sandbox Code Playgroud)

html php arrays html-lists multidimensional-array

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

如何在CSS中更改<ol>标签的样式

我的问题很简单,所以希望你能理解它.

当我们写<ol><li></li></ol>tag时,默认情况下生成的小数如下:

  1. ABC
  2. 高清
  3. GEH

等等....

但我想改变这样的风格<ol><li></li></ol>(非常小的变化,因为我的设计师给我这个):

1 - abc
2 - def
3 - gih

等等....

那么请告诉我如何才能实现这个设计ol.

这是我的CSS代码:

ol {
  margin: 0;
  padding: 0;
}
ol li {
    list-style: decimal;
}
Run Code Online (Sandbox Code Playgroud)

html css html-lists

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

如何防止最后一次li的点击事件触发?

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我需要阻止最后一个li元素的click事件.我尝试过如下,

$(document).on("click", "ul li:not(last-child)", function (e) {
//do something
}
Run Code Online (Sandbox Code Playgroud)

但这不起作用.发布您的答案,如果遇到相同的.

提前致谢 !!!

javascript jquery onclick html-lists

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

几秒后动态加载下一个li

我想创建一个动态加载ul列表.

例如,我有这个ul列表:

<section id="loadLi">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
    </ul>
</section>
Run Code Online (Sandbox Code Playgroud)

现在我想加载li元素1秒,第li一个,1秒后,li两个,1秒后,li三...当用户在该部分时(此代码位于正文的中间,所以我想要在用户滚动到html的这一部分时加载dinamically).

谁知道怎么做?

PD:我很抱歉我的英语...我知道这真的很糟糕!

html jquery dynamic-loading html-lists

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

减少Bootstrap列表宽度

我正在创建列表并使用Bootstrap对其进行样式设置。HTML看起来像这样:

<div class="list-group">
    <a href="/link" class="list-group-item list-group-item-success">Name</a>
    <a href="/link" class="list-group-item list-group-item-danger">Name</a>
</div>
Run Code Online (Sandbox Code Playgroud)

当此显示时,列表元素将占据整个页面。HTML的屏幕截图

如果不是为了着色,那将不是什么大问题。如何使列表元素仅延伸到文本?谢谢!

html css html-lists twitter-bootstrap

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