在jQuery

Question

<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>   

我尝试使用id从ul > li > a获取最#1个a代码id="4" var getId = $(this).parents('ul:last > a:first').attr("id"); 。我试着像下面那样得到它：

undefined

我得到了parent().parent().parent()。

这里的深度可能会有所不同。我不想多次使用1.1.1.1.1.1，因为这棵树可能有更深的孩子，比如说id（5级），如果我想得到最高父母的parent()我需要使用5次AxesGrid，我不想这样做。还有其他解决方案吗？

Answer 1

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

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

此外，我更新了id来模拟多个结构，并为a标记添加了一个事件监听器。您应该在代码中避免它，并且应该在类或特定选择器上。

代码

JSFiddle

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

编辑1

逻辑：

• 搜索div parent。
• 在这个父母的内部，我们将获得所有结构。循环遍历这些ul并搜索当前ID。
• 根据结果，获取所选的ul并找到第一个a代码。

Updated Fiddle

代码

＆＃13;

＆＃13;

$('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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以试试这个

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 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>

Answer 4

您可以使用last with parent方法，尝试使用以下代码： -

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

它可能对你有帮助