Select 使用 Jquery 的特定 ID

Question

我有一个游戏板，分为不同的部分。游戏一，游戏二... 我正在尝试使用 jquery 将 class 添加到具有 ID 的特定 div。所以在我下面的 PHP 中：

<div id="game1" class="playarea">
    <div id="K12" class="playnum" data-game="game1">12</div>
    <div id="D61" class="playnum" data-game="game1">61</div>
    <div id="N29" class="playnum" data-game="game1">29</div>
    <div id="P06" class="playnum" data-game="game1">06</div>
    <div id="X54" class="playnum" data-game="game1">54</div>
</div>

<div id="game2" class="playarea">
    <div id="K12" class="playnum" data-game="game1">12</div>
    <div id="D61" class="playnum" data-game="game1">61</div>
    <div id="N29" class="playnum" data-game="game1">29</div>
    <div id="P06" class="playnum" data-game="game1">06</div>
    <div id="X54" class="playnum" data-game="game1">54</div>
</div>

我只想从 ID 为 "game1" 的 DIV 将 .addClass 添加到 ID 为 "D61" 的 div。此功能将从按钮执行，因此没有像 "this" 这样的上下文。我一直在尝试 .children() 甚至 .find() 或 .attr() 但没有成功。

现在我正在使用

 $('[id="D61"]').addClass("selected");

但问题是它会在 game1 和 game2 中对 DIV 都添加 .addClass()。我怎样才能更好地缩小范围？

Answer 1

你可以像下面那样做。

$('#game1 #D61').addClass('selected').

您正在复制 id。 id 应该是独一无二的。您可以使用 class D61 而不是 id，如下所示。

<div class="D61 playnum" data-game="game1">61</div>

然后js就变成这样了

$('#game1 .D61').addClass('selected').

Answer 2

可以使用以下代码完成：

$('#game1 > #D61').addClass("selected");

带 id="game" 的 div 是其直接子带 id="D61" 的父级，因此它将仅针对 id="game1" 的 div .

Answer 3

var $reqElement = $("#game1").find("#D61");
reqElement.addClass('selected');

Answer 4

我将首先评论一些设计问题：

与自定义属性不同，id 是一个标准属性，它在整个页面中应该是唯一的（参见 http://www.w3schools.com/tags/att_global_id.asp）。
要搜索 ID，您只需搜索 #D61。见 https://api.jquery.com/id-selector/

现在答案：检查这个 link：https://api.jquery.com/find/

所以这将给出： $('#game1').find('#KD61');

Select 使用 Jquery 的特定 ID

Select Specific ID using Jquery

jquery

selector