在 jQuery 中向家长 DOM 致辞

Question

我有一个网页使用简单查询根据数据库中的类别生成相同的 DIV。所以在这种情况下有两类。每个 DIV 都有一个按钮，单击该按钮会更改当前 DIVs titleText 的文本。

<body>

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
    <div class="title">
        <div class="titleText">Category 1</div>
        <button id="btn">id="btn" Click Me</button>
    </div>
</div>

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
    <div class="title">
        <div class="titleText">Category 2</div>
        <button id="btn">id="btn" Click Me</button>
    </div>
</div>


<script>

    dp("#btn").click(function(){
        dp(".titleText").html("This is the new TITLE Text");
    });

</script>

</body>

我的问题是，例如，在类别 1 中，如果我单击该按钮，它将更改两个 titleText 的 html，而它应该只更改类别 1 中 titleText 的 html .

我尝试过使用递增 ID 和各种方法，但这绝对不是答案。那么如何仅在 Button 的当前 DOMParent div?

中更改 titleText

编写此示例代码只是为了简化我的问题，以便代码更小。我省略了 mysql 查询和排序，因为最终这就是生成的内容。

Answer 1

作为'IDs must be unique'，您可以像这样向button提供一个公共class：

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
<div class="title">
    <div class="titleText">Category 1</div>
    <button class="btn">id="btn" Click Me</button>
</div>
</div>
<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
<div class="title">
    <div class="titleText">Category 2</div>
    <button class="btn">id="btn" Click Me</button>
</div>

然后在 JS 中使用 prev 得到前一个 div 和 class titleText 像这样：

dp(".btn").click(function(){ 
    dp(this).prev(".titleText").html("This is the new TITLE Text");
});

.prev() 方法在 DOM 树中搜索每个元素的前导，并从匹配元素构造一个新的 jQuery 对象。

该方法可选择接受可以传递给 $() 函数的相同类型的选择器表达式。如果提供了选择器，将通过测试是否匹配选择器来过滤前面的元素。

这里是 Demo 同样的

Answer 2

id 属性是唯一值，所以需要将按钮id属性改为class。

<button class="btn"> Click Me</button>

现在你想访问父级，所以你应该使用parent() method of jQuery. and then you need to find children .titleText with find方法。

所以你可以这样写代码，并检查下面的例子fiddle

$(this).parent().find(".titleText").text("This is the new TITLE Text");

Example

Answer 3

你必须使用 class 按钮而不是 id，并找到它的兄弟。

<body>

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
<div class="title">
    <div class="titleText">Category 1</div>
    <button class="btn">id="btn" Click Me</button>
</div>
</div>

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000;  margin: 10px; padding:10px;">
<div class="title">
    <div class="titleText">Category 2</div>
    <button class="btn">id="btn" Click Me</button>
</div>
</div>


<script>

$("#btn").click(function() {
  $(this).siblings(".titleText").html("This is the new TITLE Text");
});

</script>

</body>

在 jQuery 中向家长 DOM 致辞

Addressing the Parent DOM in jQuery

html

php

jquery

parent