标签: html-lists

几个小时以来一直在努力解决这个简单的选择器问题,并且必须忽略一些显而易见的事情.我有一个<ul>在其中一些<li>■找嵌套<ul>秒.每个都<li>包含一个链接,当点击它时我想执行一个函数(而不是导航),但重要的是,这应该只发生在父包含的链接<ul>而不是嵌套中可能存在的任何链接<ul>.简单的你会想:

HTML:

<ul>
    <li>
        <a href="dontleavethis.page">A link</a>
        <ul>
            <li><a href="navigate.there">A nested link</a></li>
            <li><a href="navigate.somewhere">Another nested link</a></li>
        </ul>
    </li>
</ul>

jQuery的:

$('li:has(ul) a').click(function() { 
    bla bla bla...
    return false;
});

事实是,无论我如何表达我的选择器,我都无法阻止嵌套中的链接<ul>触发点击处理程序.它们显然":has(ul)"与选择器的条件不匹配,但处理程序仍然因某种原因而附加.我在这做错了什么？

目前我有一些逗号分隔值

"橘子,苹果,馅饼"

我想将它们变成这样的列表

• 桔子
• 苹果
• 馅饼

希望有人能在这里帮助我

我知道这个对于jQuery大师来说必须是一个简单的,但我真的不知道如何实现它.

我有以下HTML:

<div class="panel_contents">
  <ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li></li>
    <li></li>
  </ul>
</div>

我需要定位空<li>并将类附加到它们,例如class ="empty".如果我不需要,我不想修改HTML以手动添加类以用于表示目的.

我在这里开始使用JSFIDDLE进行演示.

万分感谢您对此的任何帮助.

-

编辑3 [9/16/14]

今天,我承认也许使用jQuery可能不是真的必要,因为使用:empty伪选择器可以使用CSS来定位空元素,这实际上在所有浏览器中都得到了很好的支持,直到IE8(虽然部分支持) - http: //caniuse.com/#search=empty

编辑2

这是另一种解决方案.

这个解决方案在<a href>s里面查找<li>,如果有的话,它不会添加类,如果没有<a href>s,则添加类为空.

编辑1

感谢Daniel的解决方案.这是一个工作演示

可能重复:
为什么不在HTML中使用表格进行布局？

我什么时候应该使用<table>,<div>或者<ul>？

每个人的主要优点和缺点是什么？

我正在尝试这样做:

   a link here
   ------------------
   another link here
   ------------------
>> active link here
   ------------------
   one more link
   ------------------

所有的---边界都是相同的长度.如果当前页面是链接(即活动链接),则>>显示(它将是图像).问题是,如果我向lis 添加填充,那么它将导致边框位于下面,>>这是不希望的.显然没有javascript.

我试图使用的一般标记是这样的:

<ul>
  <li><a href="#">a link here</a></li>
  <li><a href="#">another link here</a></li>
  <li><a href="#">active link here</a></li>
  <li><a href="#">one more link</a></li>
</ul>

#top-menu ul.menu li {
  background: url(img/back-top-menu2.png);
  width: 70px;
  height: 37px;
  cursor: pointer;
  float: left;
  text-align: center;
}

#top-menu ul.menu li:hover {
  background: url(img/back-top-menu.png);
}

#top-menu ul.menu li a { 
  color: #fff;
  text-decoration: none; 
  list-style-type: none;
  text-align: center;
  margin-left: 20px;
  margin-top: 20px;
}

如何制作保证金榜首？

我有如下的菜单结构,

<ul>  
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1406 current_page_item menu-item-7482 white">one</li>

   <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1406 current_page_item menu-item-7482 orange">two</li>

   <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1406 current_page_item menu-item-7482 white">three</li>

  <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1406 current_page_item menu-item-7482 orange">four</li>

  <li class="signup_login orange"><a title="Sign up" href="/login?status=d&amp;login=setsignup" style="font-size: 14px; font-family: 'AmerTypeMdBTMedium' ! important;"> sign up </a></li>

  <li class="logout white"><a title="Login" href="/login?status=d&amp;login=setlogin" style="font-size: 14px; font-family: 'AmerTypeMdBTMedium' ! important;"> login</a></li> 
</ul>

在上面我需要检查具有类名"signup_login"之前的li类的li.基于我需要为最后两个li设置类.

因为我在jquery下面使用过,

$(document).ready(function() {    
    if(($('.signup_login').prev('.white'))){
      $('.signup_login').addClass('orange');
      $('.logout').addClass('white');
    } else { …

我目前正在我的网站上集成bootstraps scrollspy - 而且我也在使用这样的菜单:http://development.tobypitman.com/css/menu.html

现在 - 我可以在导航中定位我的李 - 但我想要的是定位李.

    selector = this.selector
      + '[data-target="' + target + '"],'
      + this.selector + '[href="' + target + '"]'

    active = $(selector)
      .parent('li')
      .addClass('active')

任何人 ？

我感觉好像我已经尝试了从text-align center以margin:0 auto相对和100%宽度的位置,但他们没有工作,我试图居中DIV中我UL ...

这是我的代码

<style type="text/css">

.header {
  height: 40px;
  background: #000;
  width: 100%;
}

.header ul {
  list-style-type: none;
}

.header li {
  float: left;
  line-height: 40px;
}

.header li a {
  color: #FFF;
  padding: 0 18px;
  height: 40px;
}

</style>

我想做类似的事情:我试图尝试第一个孩子,但没有结果.:(.

<ul>   
    <li></li> /* + :before */
    <li></li> /* + :before */
    <li>
        <ul>
            <li></li> /* remove :before or never create :before */
        </ul>
    </li> /* + :before */
    <li></li> /* + :before */
</ul>

请帮忙.