Question

我试图使用jQuery循环遍历类并将一些文本附加到HTML元素。我使用以下HTML（示例案例）：

<div class="question">
    <div class="title">
        <strong>Here's the question title.</strong>
    </div>
    <div class="choice">Here's choice1.</div>
    <div class="choice">Here's choice2.</div>
</div>
<div class="question">
    <div class="title">
        <strong>Here's the question title.</strong>
    </div>
    <div class="choice">Here's choice1.</div>
    <div class="choice">Here's choice2.</div>
</div>

所以我试图做的是遍历页面上的每个问题，查看标题是否与某个字符串匹配，然后根据该语句附加一些文本。我有以下内容：

$('.question').each(function() {

    var title = $(this).find('.title').innerHTML;

    $('.choice').each(function() {

        var span = document.createElement("span");

        if (title == "someString")
        {
            span.className = "someClass";
        }
        else
        {
            span.className = "someOtherClass";
        }

        var text = document.createTextNode("text");
        span.appendChild(text);

        $(this).appendChild(span);
    });

    // put this in to see if outer loop was working
    document.body.style.backgroundColor = "orange";
});

文本将根据标题的内容改变颜色，因此不同的CSS类。但它似乎没有做任何事情，甚至没有将文本附加到每个选择上。背景颜色确实变为橙色，Chrome不会在开发人员工具中抛出脚本中的任何错误，因此我完全迷失了。有人可以帮忙吗？

Answer 1

你可以得到这样的标题：

var title = $(this).find('.title strong').text();

这里你将jquery与原生javascript混淆，$(this)是一个jquery对象，所以你不能使用appendChild()这里改变它的方式：

$(this).get(0).appendChild(span);

或者您可以直接使用jQuery：

$(this).append(span);

Answer 2

使用Arun P Johny的小提琴，我已经更新了一些内容;

FIDDLE

以下是重要的变化;

var title = $.trim($(this).find('.title').text());

    $(this).find('.choice').each(function () {...

将$('.choice')更改为$(this).find('.choice')，因为您只想更改该问题中的元素，而不是更改页面上的每个choice元素。

和find('.title').innerHTML;到find('.title').text());，因为您只想匹配该div中的文本，而不是html。

Answer 3

这样的东西？：

Jsfiddle

jQuery（在jsfiddle中注释免费代码）：

// On document ready...
$(function () {

    // Geat each title element...
    $('.title').each(function () {

            // Points to each title element as defined above
        var title = $(this),
            // Get all siblings of title element(s)
            choices = title.siblings(),
            // Ternary if statement. Equivalent to if ( X ) {} else {}
            myClass = title.text().trim() === "Here's the question title." ? "someClass" : "someOtherClass";

        // Make a span element...
        $('<span />', {
            class: myClass,         // Give it a class
            text: " Appended text"  // Give it some text
        }).appendTo(choices);       // Append the span to each .choice element

    });

});

HTML：

<div class="question">
    <div class="title"><strong>Here's the question title.</strong></div>
    <div class="choice">Here's choice1.</div>
    <div class="choice">Here's choice2.</div>
</div>

<div class="question">
    <div class="title"><strong>Here's the question title.</strong></div>
    <div class="choice">Here's choice1.</div>
    <div class="choice">Here's choice2.</div>
</div>

<div class="question">
    <div class="title"><strong>Here's title.</strong></div>
    <div class="choice">Here's choice1.</div>
    <div class="choice">Here's choice2.</div>
</div>

Css：

.someClass {
    color: red;
}
.someOtherClass {
    color: green;
}

.question { margin: 10px 0px; }

在嵌套类中添加HTML

3 个答案: