Question

我在body

上有一个data-node-id属性

<body data-node-id="1093>

我还可以在.navItemParent

下的以下集合中找到匹配的ID

<div class="row small-up-5 navItemParent">
    <div class="column navItem">
        <a href="/" data-node-id="1093"><span class="topLineNav">Dining</span></a>
    </div>
    <div class="column navItem">
        <a href="/" data-node-id="1111"><span class="topLineNav">Dining</span></a>
    </div>
    <div class="column navItem">
        <a href="/" data-node-id="1211"><span class="topLineNav">Dining</span></a>
    </div>
</div>

基本上我需要查看data-node-id标记上的a是否与body标记上的当前值匹配。

我试过了（下面的if条件）

    if ($(".navItemParent").find(" .navItem a").data("node-id") === $("body").data("node-id")) {
        $(".navItemParent").find("a.active").removeClass("active");
        $(".navItemParent .navItem a").addClass("active");
    };

Answer 1

您可以获取body节点ID，然后查找具有匹配节点ID的所有元素：

var bodyNodeID = $("body").data("nodeId");
var matchingNodeElements = $(".navItemParent").find("[data-node-id='" + bodyNodeID + "']");

Answer 2

获取id，使用它构建一个选择器并让jQuery完成工作

var node_id = $(document.body).attr("data-node-id"),
    element = $('.navItemParent').find('a[data-node-id="' + node_id + '"]');

或者使用香草JS

var node_id = document.body.getAttribute("data-node-id"),
    element = document.querySelector('.navItemParent a[data-node-id="' + node_id + '"]');

Answer 3

我会这样做：

var matches = $(".navItemParent").find('a[data-node-id="' + $("body").data("node-id") + '"]');
alert("Found " + matches.length + " results");

Answer 4

您可以从主体传递该值作为Jquery的选择器：

var nodebody = $('body').data('node-id');
$('a[data-node-id="'+nodebody+'"]').css('color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body data-node-id="1093">
<div class="row small-up-5 navItemParent">
    <div class="column navItem">
        <a href="/" data-node-id="1093"><span class="topLineNav">Dining</span></a>
    </div>
    <div class="column navItem">
        <a href="/" data-node-id="1111"><span class="topLineNav">Dining</span></a>
    </div>
    <div class="column navItem">
        <a href="/" data-node-id="1211"><span class="topLineNav">Dining</span></a>
    </div>
</div>

Answer 5

var elementExists=$("a[data-node-id='" + $("body").data("node-id") + "']").length > 0; // will return true if found

这将是选择器：$("a[data-node-id='" + $("body").data("node-id") + "']")

Answer 6

您可以结合使用jQuery attribute selector和attr function来检查是否至少有一个a项，其“data-node-id”属性与body是一个。

$(function() {
  // demo: just to add the `data-node-id` attribute to the `body` tag
  $("body").attr("data-node-id", "1093");

  alert($("a[data-node-id = '" + $("body").attr("data-node-id") + "']").length > 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row small-up-5 navItemParent">
  <div class="column navItem">
    <a href="/" data-node-id="1093"><span class="topLineNav">Dining</span></a>
  </div>
  <div class="column navItem">
    <a href="/" data-node-id="1111"><span class="topLineNav">Dining</span></a>
  </div>
  <div class="column navItem">
    <a href="/" data-node-id="1211"><span class="topLineNav">Dining</span></a>
  </div>
</div>

在jQuery中查找元素集中的匹配值并返回该元素

6 个答案: