javascript - 如何使用 JQuery 获取 parent sibling 的文本

Question

我试图直接在另一个链接(父级的同级链接)之前获取链接的文本，但我一直得到“未定义”。我不知道需要更改什么才能获取 anchor 标记的文本而不是“未定义”

这是我的 HTML:

<li class="dropdown extra-class-a extra-class-b">
  <a class="level-1 extra-class1 extra-class2" href="#">Home Menu 1</a>
  <ul class="someclass" >
      <li class="some-class3"></li>
      <li class="no-subcat last" data-moburl="#" data-cgid="other-text">
          <a class="level-2" href="#"> Shop Text </a>
      </li>
  </ul>
</li>

这是我的脚本。请注意，我将此作为 onclick 事件添加到 Adob​​e DTM，因此我实际上不确定如何使用 console.log 对其进行调试。如果有人也能解释如何做到这一点，那将会很有帮助。

这是基于下面 Cory 的建议，但在我期待 home menu 1>shop text 的最后一行，我得到 >shop text (即值因为“par”为空

var $x = $(this);

//get parent link element (i.e., HN1 value)
var par = $x.closest('[class*="dropdown"]').find('a[class^="level-1"]').text(); ; 
//get value of link clicked
var clicked = $x.text(); 

//expecting "home menu 1>shop text"
//currently returns ">shop text"
var finalValue = par + '>' + clicked; 

Answer 1

jQuery 库功能是通过函数 $ 或 jQuery 访问的，您似乎在代码中省略了它们。

• 将 (x) 实例替换为 $(x) 或 jQuery(x)、OR
• 将 this 替换为 $(this) 或 jQuery(this)。

上述任何一个的结果都将是一个正确包装的 jQuery 元素，使您可以访问 closest()、prev() 以及您想要的其他 jQuery 函数。正在尝试在您的代码中使用。

在 jQuery 领域，命名变量很有帮助，这样您就知道它们已被包装。对于其余的，我将使用上面的第二个选项，因此我将更改 x 的名称。您的固定代码可能类似于:

var $x = $(this);

var par = $x.closest('[class*="dropdown"]')
    .find('[class^="level-1"]')
    .text(); 
      // ^^ function, not a property  

// get text of link clicked - this works!
var clicked = $x.text();
                  // ^^ function, not a property

   var finalValue = par + '>' + clicked;
// ^^^ don't forget to declare variables with var