JQuery - 创建父祖父母级别文本作为对象

Question

我正在尝试使用函数

创建以前的父级和祖父级级别文本作为对象

例如关于元素孙子11

<a class="level-12" href="#" parobj="['Child1','Child','Grandparent']" other="getOther(this)"> Grandchild11</a>

我在为每个锚标记创建属性parobj的对象时遇到问题，我甚至尝试添加具有级别的类但未能获得准确的输出

无论如何通过悬停或点击锚标记获得如上所述的parobj？

Codepen URL供参考： http://codepen.io/divyar34/pen/bqMaQY

HTML：

$('a').attr('parObj', 'getParent(this)'); //adding attr parentObject with function to get parent,grandparent details
$('a').attr('other', 'getOther(this)'); //other Info attribute for ajax call

function getParent(val) {
  var obj = [val];
  obj.push($(val).parent().text());
  return obj
}

function getOther(val) {
  //just for reference, but originaly using internal api
  $.get('otherinfo.html', {
    option: val
  }, function(data) {
    console.log(data);
    return data.name
  });
}

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

<div class="level-1">Parent1
  <ul class="level-2">
    <li class="level-3"><a class="level-4" href="#">Grandparent</a>
      <div class="level-4">
        <ul class="level-5">
          <li class="level-6">
            <a class="level-7" href="#">Child</a>
            <div class="level-7">
              <ul class="level-8">
                <li class="level-9"> <a class="level-10" href="#">Child1</a>
                  <ul class="level-10">
                    <li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
                    <li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
                  </ul>
                </li>

                <li class="level-9"> <a class="level-10" href="#">Child2</a>
                  <ul class="level-10">
                    <li class="level-11"><a class="level-12" href="#">GrandChild21</a></li>
                    <li class="level-11"><a class="level-12" href="#">grandchild22</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>

          <li class="level-6">
            <a class="level-7" href="#"> Child2 </a>
            <ul class="level-7">
              <li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
              <li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<!-- Parent1 -->

<div class="level-1">Parent2
  <ul class="level-2">
    <li class="level-3"><a class="level-4" href="#">Grandparent</a>
      <div class="level-4">
        <ul class="level-5">
          <li class="level-6">
            <a class="level-7" href="#">Child</a>
            <div class="level-7">
              <ul class="level-8">
                <li class="level-7"> <a class="level-8" href="#">Child1</a>
                  <ul class="level-8">
                    <li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
                    <li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
                  </ul>
                </li>

                <li class="level-7"> <a class="level-8" href="#">Child2</a>
                  <ul class="level-8">
                    <li class="level-9"><a class="level-10" href="#">GrandChild21</a></li>
                    <li class="level-9"><a class="level-10" href="#">grandchild22</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>

          <li class="level-6">
            <a class="level-7" href="#"> Child2 </a>
            <ul class="level-7">
              <li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
              <li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<!-- Parent2 -->