Accessing the upper parent node of the DOM

Question

Here is the code that i have a problem with:

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

I am trying to access the parent node but my code is not working

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

I'm trying to access this

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

When a user clicks on the VIA PFM it would append this result "Products > AC-DC Board Mount > VIA PFM"

Your HTML code seems to be invalid (tags are not closed/ matched). — MaxZoom, Jul 07 '15 at 16:39
Your `
` elements are never closed and you have `
` elements as a direct child of `
`. Can't really expect DOM traversing to go well if the markup that creates the DOM is invalid. — , Jul 07 '15 at 16:44
I didn't paste the whole code of the
as it was too long. Should I paste the whole thing? and also this the code of the website I wish I could change it but this what the site has and I have no access to the site — sky, Jul 07 '15 at 16:52

score 0 · Accepted Answer · answered Jul 07 '15 at 17:01

.children() grabs immediate children with the option to filter them by a selector. You probably meant to use .find('a.blue'). ~~Same with .parents(). Use .closest('.level_2') instead.~~ Edit: this is wrong. parents will traverse upwards past one level.

Your code is a little hard to read. Hopefully this solves your problem, but I can't confirm it myself.

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

Docs:
.parents()
.children()
.closest()
.find()

score 0 · Answer 2 · answered Jul 07 '15 at 17:05

0

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

Thanks to @JosephMarikle

answered Jul 07 '15 at 17:05

sky

151
10

Accessing the upper parent node of the DOM

2 Answers2