select 元素 class 和 id jquery

Question

我正在尝试 select 两个具有 class 和 ID 的不同元素，第一个有效但第二个无效（它在没有 ID 的情况下有效），我无法弄清楚为什么。请帮助我。

代码：

$(document).ready(function() {
var num = 0;
$("#add").click(function() {
    $("main").append("<div class=\"card\" style=\"width: 20rem;\">\
    <div class=\"card-block\">\
    <h4 class=\"card-title\" id=\"" + num.toString() + "\"></h4>\
    <p class=\"card-text\" id=\"" + num.toString() + "\"></p>\
    </div>\
    </div>");
    var title = $("#noteTitle").val();
    var body = $("#noteBody").val();
    var photo = $("#notePhoto").val();
    if (photo) {
        $(".card").prepend("<img class=\"card-img-top\" src=" + photo + " alt=\"Card Image\">");
    }
    $(".card-title#"+ num.toString()).html(title);
    $(".card-text#"+ num.toString()).html(body); //<-- here is where I get the problem
    num ++;
});
})

Answer 1

下面是解决方案。 https://jsfiddle.net/0knefedh/

$(document).ready(function() {
var num = 0;
$("#add").click(function() {
    $("body").append("<div class=\"card\" style=\"width: 20rem;\">\
    <div class=\"card-block\">\
    <h4 class=\"card-title\" id=\"title" + num.toString() + "\"></h4>\
    <p class=\"card-text\" id=\"text" + num.toString() + "\"></p>\
    </div>\
    </div>");
    var title = "dasdasd";
    var body = "asdasdas";
    var photo = $("#notePhoto").val();
    if (photo) {
        $(".card").prepend("<img class=\"card-img-top\" src=" + photo + " alt=\"Card Image\">");
    }
    $(".card-title#title"+ num.toString()).html(title);
    console.log(num);
    $(".card-text#text"+ num.toString()).html(body); //<-- here is where I get the problem
    num ++;
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="add" value="Add" >Add</button>

问题出在您为 .card-title 和 .card-body[= 生成的 ID 29=]。两者具有相同的 ID，其中 ID 应该是唯一的。

所以，它第一次工作然后就没有了。

select 元素 class 和 id jquery

select element with class and id with jquery

javascript

jquery

jquery-selectors