获取 jQuery 中最相关的元素答案

【问题标题】：Get the top most related a element in jQuery获取 jQuery 中最相关的元素
【发布时间】：2016-01-18 13:46:13
【问题描述】：

<ul>
    <li>
        <a id="1">Item 1</a>
        <ul>
            <li>
                <a id="2">Item 1.1<a>
                <ul>
                    <li>
                        <a id="3">Item 1.1.1</a>
                        <ul>
                            <li>
                                <a id="4">Item 1.1.1.1</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我正在尝试从a 和id="4" 中获取最顶部ul > li > a 标记（即#1）的id。我正在尝试像下面这样来获得它：

 var getId = $(this).parents('ul:last > a:first').attr("id");

我收到undefined。

这里的深度可能会有所不同。我不想多次使用parent().parent().parent()，因为这棵树可能有更深的孩子，如果我想获得我需要的最高父级的id，最多可以说1.1.1.1.1.1（5个级别）使用 5 次 parent()，我不希望这样。有没有其他解决方案？

【问题讨论】：

总是一样的深度吗？
我不想使用 parent().parent().parent() 多个父关键字，因为这棵树可能有更深的孩子，比如说 tp 1.1.1.1.1.1(5 level) for如果我想获得最顶层父母的 id，我需要使用 5 次 parent()，我不希望这样，还有其他解决方案吗？
@Darren 深度可能会有所不同..
@PraveenKumar 我已重新打开此问题，因为该问题不是重复的。在这种情况下，OP 要查找的元素不是直接父元素，并且该问题中接受的答案也很糟糕。
@RoryMcCrossan 当然谢谢。

标签： jquery

【解决方案1】：

正如我已经评论过的，你可以使用.parents()。

注意 我假设这些结构包含在div中。

我还更新了ids 以模拟多个结构，并在a 标签中添加了一个事件监听器。您应该在代码中避免使用它，并且应该在类或特定选择器上。

代码

JSFiddle

$('a').on("click", function() {
  var ul = $(this).parents('div').find('ul:first');
  var a = $(ul).find('a:first')[0]
  console.log(a.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <a id="first_1">Item 1</a>
      <ul>
        <li>
          <a id="first_2">Item 1.1</a>
        </li>
      </ul>
    </li>
  </ul>
</div>


<div>
  <ul>
    <li>
      <a id="second_1">Item 2</a>
      <ul>
        <li>
          <a id="second_2">Item 2.1</a>
          <ul>
            <li>
              <a id="second_3">Item 2.1.1</a>
              <ul>
                <li>
                  <a id="second_4">Item 2.1.1.1</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>


<div>
  <ul>
    <li>
      <a id="third_1">Item 3</a>
      <ul>
        <li>
          <a id="third_2">Item 3.1</a>
          <ul>
            <li>
              <a id="third_3">Item 3.1.1</a>
              <ul>
                <li>
                  <a id="third_4">Item 3.1.1.1.1</a>
                  <ul>
                    <li>
                      <a id="third_4">Item 3.1.1.1</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

编辑 1

逻辑：

搜索 div 父级。
在这个父级中，我们将获得所有结构。遍历这些 uls 并搜索当前 id。
根据结果，获取选中的ul，找到第一个a标签。

Updated Fiddle.

代码

$('a').on("click", function() {
  var div = $(this).parents('div');
  var uls = div.children();

  var selectedUl = null;
  for (var i = 0; i < uls.length; i++) {
    var _list = $(uls[i]).find('#' + $(this).attr("id"));
    if (_list.length > 0) {
      selectedUl = uls[i];
      break;
    }
  }

  var a = $(selectedUl).find('a:first')[0];
  console.log(a.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <a id="first_1">Item 1</a>
      <ul>
        <li>
          <a id="first_2">Item 1.1</a>
        </li>
      </ul>
    </li>
  </ul>

  <ul>
    <li>
      <a id="second_1">Item 2</a>
      <ul>
        <li>
          <a id="second_2">Item 2.1</a>
          <ul>
            <li>
              <a id="second_3">Item 2.1.1</a>
              <ul>
                <li>
                  <a id="second_4">Item 2.1.1.1</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <ul>
    <li>
      <a id="third_1">Item 3</a>
      <ul>
        <li>
          <a id="third_2">Item 3.1</a>
          <ul>
            <li>
              <a id="third_3">Item 3.1.1</a>
              <ul>
                <li>
                  <a id="third_4">Item 3.1.1.1.1</a>
                  <ul>
                    <li>
                      <a id="third_4">Item 3.1.1.1</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

实际上这三个项目都在一个 div 中。不在单独的 div 中。
那么他们有类似的ids 吗？我的意思是<a> 标签？
@VijayKumar 我的意思是类似的，就像我的情况一样，它们是first_，然后是 ID...如果不是，文本是否相似？像 1.1、1.1.1。等等等等？
Id 有唯一编号，没有前缀文本，比如 1,2,6,5,4，等等
@VijayKumar 我已经更新了我的答案。希望能帮助到你。虽然我建议您将每个结构封装在自己的 div 中。

【解决方案2】：

你可以试试这个

//Store all ul
$elems = $('#4').parents('ul');

// Get id of first ul > a
console.log($($elems[$elems.size() - 1]).find('a').attr('id'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
	<li>
    <a id="1">Item 1</a>
    <ul>
      <li>
        <a id="2">Item 1.1<a>
        <ul>
          <li>
            <a id="3">Item 1.1.1</a>
            <ul>
              <li>
              <a id="4">Item 1.1.1.1</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

【讨论】：

【解决方案3】：

  $(document).ready(function(){
     $('a').on("click", function () {
         alert($(this).closest('div').find('a:first').attr('id'));
     });
});


<div id="div_container">
<ul>
<li>
    <a id="1">Item 1</a>
    <ul>
        <li>
            <a id="2">Item 1.1<a>
            <ul>
                <li>
                    <a id="3">Item 1.1.1</a>
                    <ul>
                        <li>
                            <a id="4">Item 1.1.1.1</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

【讨论】：

【解决方案4】：

你可以使用 last with parents 方法，试试下面的代码：-

var getId = $('#4').parents('ul a').last().attr("id");

也许对你有帮助

【讨论】：

复制我的答案做得很好。但是，由于与我相同的原因，这是错误的 - a 不是 #4 元素的父级。
认真的吗？现在你也要复制评论中的答案吗？
你想说什么？
对不起，伙计们，我已经编辑了我的答案，它对我来说非常有效。