如何修复此 JQuery 函数以获取单击元素的父 li 元素的数据值值？

Question

我不太喜欢 JavaScript 和 JQuery，我发现以下困难。

在页面中重新渲染了一棵树（使用 JQuery **JStree* 库）。

所以在我的视图代码中，我有这样的东西代表这棵树的一个节点：

<li role="treeitem" data-jstree="{&quot;opened&quot;:true,&quot;selected&quot;:true,&quot;icon&quot;:&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;}" data-id="1" data-value="6.1" aria-selected="true" aria-level="3" aria-labelledby="j1_5_anchor" aria-expanded="true" id="j1_5" class="jstree-node  jstree-open">
    <i class="jstree-icon jstree-ocl" role="presentation"/>
    <a class="jstree-anchor  jstree-clicked" href="#" tabindex="-1" id="j1_5_anchor">
        <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url(&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;); background-position: center center; background-size: auto;"/>6.1 - Listino Prezzi</a>
    <ul role="group" class="jstree-children">
        <li role="treeitem" data-jstree="{&quot;opened&quot;:false,&quot;icon&quot;:&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;}" data-id="1" data-value="6.1.1" aria-selected="false" aria-level="4" aria-labelledby="j1_6_anchor" id="j1_6" class="jstree-node  jstree-leaf">
            <i class="jstree-icon jstree-ocl" role="presentation"/>
            <a class="jstree-anchor" href="#" tabindex="-1" id="j1_6_anchor">
                <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url(&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;); background-position: center center; background-size: auto;"/>6.1.1 - Acquisti - AAA</a>
        </li>
        <li role="treeitem" data-jstree="{&quot;opened&quot;:false,&quot;icon&quot;:&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;}" data-id="0" data-value="6.1.0" aria-selected="false" aria-level="4" aria-labelledby="j1_7_anchor" id="j1_7" class="jstree-node  jstree-leaf jstree-last">
            <i class="jstree-icon jstree-ocl" role="presentation"/>
            <a class="jstree-anchor" href="#" tabindex="-1" id="j1_7_anchor">
                <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url(&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;); background-position: center center; background-size: auto;"/>6.1.0 - Acquisti - ZZZ</a>
        </li>
    </ul>
</li>

所以这是使用 JSTree JQuery 库渲染树的脚本（它工作得非常好）：

<script>
$(function () { 
    $(#tree).jstree(
    { 
        "search" : { 
            "show_only_matches" : false 
        },        
        "plugins" : ["search"] 
    }
}).delegate("a", "click", function (event, data) {
    var pNode = event.target.parentNode.innerText;
    pNode = pNode.split(" - ")[0];

    // MY NEW CODE START
    var pNodeDataValue = event.target.parentNode.data('value');
    alert(pNodeDataValue);
    // MY NEW CODE END

    window.location.replace('" + link + "' + pNode); });
    var to = false; 
    $('#tree_q').keyup(function () { 
        if(to) { clearTimeout(to); } 
        to = setTimeout(function () { 
            var v = $('#tree_q').val(); 
            $('#tree').jstree(true).search(v); 
        }, 250); 
    }); 
}); 
</script>

如您所见，此代码还包含一个 delegate 定义处理特定树节点上的点击的函数，在这里我发现尝试对原始逻辑进行一点更改时遇到了一些困难。

我试图改变的原始逻辑如下：点击一个节点应该意味着点击前面 HTML 代码中的 元素。所以点击它检索的 元素

var pNode = event.target.parentNode.innerText;
pNode = pNode.split(" - ")[0];

此代码应执行以下操作：

获取被点击元素的内容，放入pNode变量。所以 pNode 会包含这样的内容：6.1 - Listino Prezzi（参考前面的 HTML 代码示例），然后拆分并放入仅 pNode 6.1 值。

好的，它工作正常，但由于我必须从我的树可视化中删除这个索引号（6.1 和类似），我必须从其他地方获取这个值。

所以我知道父

元素的 data-value 字段。事实上，正如您在前面的 HTML 示例代码中看到的那样，我有类似的内容：

<li role="treeitem" data-jstree="{&quot;opened&quot;:true,&quot;selected&quot;:true,&quot;icon&quot;:&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;}" data-id="1" data-value="6.1" aria-selected="true" aria-level="3" aria-labelledby="j1_5_anchor" aria-expanded="true" id="j1_5" class="jstree-node  jstree-open">

如您所见，有 data-value="6.1"，它是我必须检索然后在我的函数中使用的值。

正如您在我之前的 JQuery 代码中看到的那样，我尝试以这种方式获取它：

// MY NEW CODE START
var pNodeDataValue = event.target.parentNode.data('value');
alert(pNodeDataValue);
// MY NEW CODE END

但它不工作，在我的浏览器控制台中，执行此行时我收到以下错误消息：

TypeError: event.target.parentNode.data is not a function

为什么？怎么了？我错过了什么？如何尝试解决此问题并获取父

元素的 data-value 值的值？

Answer 1

问题是您在同一代码中混合了 jQuery 和纯 javascript。例如，data() 函数仅适用于 jQuery 选择器。

---

首先，让我们选择选择器。
使用 jQuery，您有一些方法可以做到这一点：

1. 使用您使用的纯 javascript 作为参考：$(event.target.parentNode)
2. 使用this 不重新运行DOM 查询，并添加parent():$(this).parent();
3. 使用带有parent()的纯javascript：$(event.target).parent()
4. 使用this.parentNode 作为参考：$(this.parentNode)

---

现在，关于使用 jQuery 引用获取属性data-value，您可以使用以下方法：

1. 使用data()获取data-*属性：$(this).parent().data('value')
2. 使用attr()获取任意属性：$(this).parent().attr('data-value')

但是，如果你真的想使用纯 javascript 引用（我不推荐它，因为你已经有 jQuery），你可以使用 javascript getAttribute(): event.target.parentNode.getAttribute('data-value')

---

带有示例的片段：

$("#clickable").on("click", function(event, data){
  console.log("With jQuery: ",
  
  "\n$(event.target.parentNode).data('value') :",
  $(event.target.parentNode).data('value'),
  
  "\n$(this.parentNode).data('value') :",
  $(this.parentNode).data('value'),
  
  "\n$(event.target).parent().data('value') :",
  $(event.target).parent().data('value'),
  
  "\n$(this).parent().data('value') :",
  $(this).parent().data('value'),
  
  "\n$(this).parent().attr('data-value') :",
  $(this).parent().attr('data-value'),
  
  "\n\nWith plain Javascript:",
  "\nthis.parentNode.getAttribute('data-value')",
  this.parentNode.getAttribute('data-value'),
  
  "\nevent.target.parentNode.getAttribute('data-value') :",
  event.target.parentNode.getAttribute('data-value'));
});

#clickable {
  border: 1px solid black;
  background-color: blue;
  width: ;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="parent" data-value="datavalue">
  <div id="clickable">
    Click me!
  </div>
</div>

Answer 2

您正在尝试在没有此类方法的 DOM 对象上使用 jQuery 函数 data()。

改用：

var pNodeDataValue = event.target.parentNode.dataset.value;

或

var pNodeDataValue = $(event.target).parent().data('value');