Javascript 如何在列表中选择父项_Javascript_Jquery_Html_Css_Html Lists

Javascript 如何在列表中选择父项

javascript jquery html css

Javascript 如何在列表中选择父项,javascript,jquery,html,css,html-lists,Javascript,Jquery,Html,Css,Html Lists,我有一份清单，声明如下： <ul> <li class="yearCategory"><a href="javascript:void(0)">2011</a></li> <ul class="subCategory"> <li><a href="javascript:void(0)">January</a></li> <li><a href=

我有一份清单，声明如下：

<ul>
  <li class="yearCategory"><a href="javascript:void(0)">2011</a></li>
  <ul class="subCategory">
  <li><a href="javascript:void(0)">January</a></li>
  <li><a href="javascript:void(0)">February</a></li>
</ul>
</ul>

假设您的起始元素是a-Tag（包含文本“一月”）。要实现2011年的价值，您应该做到以下几点：

var result = $start.parent().parent().prev().find("a").text();

这条链将是这样的：第一个家长让你找到包含“a”的“li”。第二个家长让你去“ul”包含那个“li”。 prev让你在“ul”元素之前找到元素，因此你的li类是“yearCategory”。然后找到包含所需文本的a标记

例如，如果startelement不是“a”-标记，而是“li”-标记，则需要少一个“父”-功能：

var result = $start.parent().prev().find("a").text();

希望这有帮助

假设您的起始元素是a-Tag（包含文本“一月”）。要实现2011年的价值，您应该做到以下几点：

var result = $start.parent().parent().prev().find("a").text();

例如，如果startelement不是“a”-标记，而是“li”-标记，则需要少一个“父”-功能：

var result = $start.parent().prev().find("a").text();

希望这有帮助

可能的解决方案如下：

$("li.yearCategory a:fisrt", $(anchorNode).parent().parent()).text();

…但为了简化操作，我将向父ul添加一个id，方法是允许一个简单的选择器，如：

$("ul#myid li.yearCategory a:first").text()

一个可能的解决办法是：

$("li.yearCategory a:fisrt", $(anchorNode).parent().parent()).text();

…但为了简化操作，我将向父ul添加一个id，方法是允许一个简单的选择器，如：

$("ul#myid li.yearCategory a:first").text()

首先，我很确定您的标记是无效的，您的嵌套ul应该位于li元素中，如下所示：

<ul>
  <li class="yearCategory">
      <a href="javascript:void(0)">2011</a>
      <ul class="subCategory">
          <li><a href="javascript:void(0)">January</a></li>
          <li><a href="javascript:void(0)">February</a></li>
      </ul>
  </li>
</ul>

首先，我很确定您的标记是无效的，您的嵌套ul应该位于li元素中，如下所示：

<ul>
  <li class="yearCategory">
      <a href="javascript:void(0)">2011</a>
      <ul class="subCategory">
          <li><a href="javascript:void(0)">January</a></li>
          <li><a href="javascript:void(0)">February</a></li>
      </ul>
  </li>
</ul>

由于原始标记无效，请稍微调整标记：

<ul>
  <li class="yearCategory">
    <a href="javascript:void(0)">2011</a>
    <ul class="subCategory">
      <li><a href="javascript:void(0)">January</a></li>
      <li><a href="javascript:void(0)">February</a></li>
    </ul>
  </li>
</ul>

由于原始标记无效，请稍微调整标记：

<ul>
  <li class="yearCategory">
    <a href="javascript:void(0)">2011</a>
    <ul class="subCategory">
      <li><a href="javascript:void(0)">January</a></li>
      <li><a href="javascript:void(0)">February</a></li>
    </ul>
  </li>
</ul>

考虑到您提供的加价，这应该是可行的-

$("a").click(function () {
    alert($(this).parents('ul').find('li.yearCategory > a').text())
})

工作演示-

你必须小心这一点，因为它会激发所有的“a”点击，但只有当链接以与“一月”和“二月”链接相同的方式嵌套时才会起作用

此外，正如Tomalak Geret'kal在下面的评论中指出的，代码将与OP中提供的标记一起工作，它可能会失败，具体取决于它周围的标记。

考虑到您提供的标记，这应该是可行的-

$("a").click(function () {
    alert($(this).parents('ul').find('li.yearCategory > a').text())
})

工作演示-

你必须小心这一点，因为它会激发所有的“a”点击，但只有当链接以与“一月”和“二月”链接相同的方式嵌套时才会起作用

此外，正如Tomalak Geret'kal在下面的评论中指出的，代码将与OP中提供的标记一起工作，它可能会失败，这取决于它周围的标记。

主题外，但仍然需要知道：您可能不会嵌套

元素。向我们展示你与家长的关系……因为，这一定是一条路。@Baszz但是
元素可以包含
```
ul
```
元素，就我所知…@Marnix同意，正如你所说，据我所知know@Marnix：我确定它无效…但是，您可以在
元素中添加