访问DOM的上层父节点

Question

这是我遇到问题的代码：

<ul id="nav">
  <li>
    <label style="display: inline;">
      <a class="dkblue strong">Search</a>
    </label>
    <br>
    <a id="productnav1" href="javascript:void(0)" class="blck-dkblue">
      <span>Products</span></a>
    <div class="clear"></div>           
    <div id="productnav" class="menu" style="display: block;">
    <!--  open new section -->
      <div class="level_1">
        <section>
          <header>
            <h5>1</h5>
            <label><small><strong>Select</strong></small><br>Category</label>
          </header>
          <div class="clear"></div>
          <div class="pull-left">
            <ul class="sep nav-product">
              <li class="group">
                <a class="cat-name" href="#" style="cursor: default;">AC-DC</a>         
                <ul class="nav-product">
                  <div>
                    <ul class="sep nav-product">
                      <li>
                        <a href="#">Board Mount</a>         
                        <ul class="nav-product">
                          <!--  open new section -->
                          <div class="level_2">
                            <div class="level_3">
                              <section>
                                <div class="1stdiv"></div>
                                <h3 class="blue">Lorem ipsum</h3>
                              </section>
                            </div>
                            <section>
                              <header>
                              <h5>2</h5>
                                <label>
                                  <small>
                                    <strong>Select</strong>
                                  </small>
                                  <br>&nbsp;
                                  <a href="#" class="blue" style="cursor: default;">AC-DC</a>&nbsp;
                                  <a href="http://www.test.com/ac-dc/boardmount" class="blue">Board Mount</a>&nbsp;
                                </label>
                              </header>
                              <div class="clear"></div>
                              <div>
                                <ul class="sep nav-product">
                                  <li class="group">
                                    <a href="#" style="cursor: default;">Surf Corrected</a>
                                    <ul class="nav-product">
                                      <div>
                                        <ul class="sep nav-product">
                                          <li class="group">
                                            <a href="#" style="cursor: default;">Universal Input</a>
                                            <ul class="nav-product">
                                              <div>
                                              <ul class="sep nav-product">
                                                <li>
                                                  <a href="http://www.test.com/ac-dc/boardmount/VIA-PFM">VIA PFM</a>
                                                </li>

我正在尝试访问父节点，但我的代码不起作用

$("#nav").on("click", "a", function () {
    if (!this.href.match('#$') && !this.href.match('javascript')) {
       alert($(this).parents('.level_2').children('a.blue').text());
    }
       // .append()
});

我正在尝试访问这个

<a href="#" class="blue" style="cursor: default;">AC-DC</a>&nbsp;<a href="http://www.test.com/ac-dc/boardmount" class="blue">Board Mount</a>

当用户点击 VIA PFM 时，它会附加此结果 "Products > AC-DC Board Mount > VIA PFM"

Answer 1

.children() 通过选择器 filter 选项获取直接子元素。您可能打算使用 .find('a.blue')。 ~~同.parents()。请改用 .closest('.level_2')。~~ 编辑：这是错误的。 parents 将向上遍历一层。

您的代码有点难以阅读。希望这能解决您的问题，但我无法亲自确认。

$(this).closest('.level_2').find('a.blue').text()

文档：
.parents()
.children()
.closest()
.find()

Answer 2

$("#nav").on("click", "a", function () {
    if (!this.href.match('#$') && !this.href.match('javascript')) {
       alert($(this).closest('.level_2').find('a.blue').text());
    }
});

感谢@JosephMarikle

访问DOM的上层父节点

Accessing the upper parent node of the DOM

javascript

dom

dom-traversal

jquery-traversing

dom-events