如何在此Web应用程序中使用jQuery Selector？

本文介绍了如何在此Web应用程序中使用jQuery Selector？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在努力在我自己的网络应用程序中选择一个删除图标。

I am trying to work out to select a delete icon in my own web application. delectIcon

<main>
    <div class="container">
        <div class="tabs">
            <a href=""><p><span class="active">Newest</span></p></a><a href=""><p>
            <span>Oldest</span></p></a><a href=""><p><span>Add</span></p></a>
        </div>
        <div class="content">
            <ul>
                <li>
                    <span class="itemLeft">Answer emails</span>
                    <span class="itemMiddle">12-31-2016</span>
                    <span class="itemRight">1</span>
                    <b class="deleteIcon"> X </b>
                </li>
                <li>
                    <span class="itemLeft">Prep for Monday's class</span>
                    <span class="itemMiddle">12-31-2016</span>
                    <span class="itemRight">5</span>
                    <b class="deleteIcon"> X </b>
                </li>
            </ul>

        </div>
    </div>
</main>

JavaScript

    $(".deleteIcon").on("click", function () {
    alert("Oh, clicked!");
    return false;
});

我没有这么做。所以我使用Chrome Web开发工具找到CSS路径。我尝试使用XPath（ $[/ html / body / main / div / div [2] / ul / li [1] / b]）和CSS Path（ $（pathbody> main> div> div.content> ul> li：nth-child（1）> b）他们都没有工作。

I failed to do so by writing it myself. So I used Chrome Web Developer Tool to find the CSS path. I tried to use the XPath($"[/html/body/main/div/div[2]/ul/li[ 1 ]/b]") and CSS Path ($"(pathbody > main > div > div.content > ul > li:nth-child(1) > b)"). Neither of them worked.

我试图用一个ID标记它，只有一个li存在。 CSS选择器工作正常。但是当我点击deleteIcon $（＃deleteIcon）时，没有发生任何事情。

I tried to mark it with an ID and made only one "li" exists. The CSS selector worked all right. But when I clicked the deleteIcon$"(#deleteIcon)", nothing happened.

#deleteIcon{

float:right;

font-weight: bold;
padding: 0 3px 0 3px;
border-radius: 5px;
background: #ccc;
cursor: pointer;
margin-left: 5px;
font-size: 1.3em;
text-align: center;

}

我的标题。我发现下面的结果。

I also tried to select my title. I found the following worked out.

  $(".container h1").on("click", function () {
    alert("Oh, no!");
    return false;
});

我现在不该做什么。任何人都可以在这里帮助我吗？

I do not what to do now. Can anyone help me out here?

谢谢！

我确实添加了通过JavaScript将deleteIcon转换为HTML。我不知道这是否会影响我的选择器。

I did actually add the deleteIcon into the HTML by JavaScript. I do not know whether this can have an effect on my selector.

<main>
    <div class="container">
        <div class="tabs">
            <a href=""><p><span class="active">Newest</span></p></a><a href=""><p>
            <span>Oldest</span></p></a><a href=""><p><span>Add</span></p></a>
        </div>
        <div class="content">



        </div>
    </div>
</main>

JavaScript（下面列出的重要部分）

JavaScript (The important part listed below)

function Item(name,dueDate,type){
    this.name=name;//1
    this.dueDate=dueDate;//input2
    this.type=type;//3
};




$(".tabs a span").toArray().forEach(function (element) {
    var $element = $(element);

    // create a click handler for this element
    $element.on("click", function () {
        var $content,
            $input,
            $button,
            i;



        if ($element.parent().parent().is(":nth-child(1)")) {
            // newest first, so we have to go through
            // the array backwards

            $content = $("<ul>");
            for (i = Task.length-1; i >= 1; i--) {
                // $buttondelete = $("<buttonDelete>").text("X");
                var txt1 = Task[i].toStringName();
                var txt2 = Task[i].toStringDate();
                var txt3 = Task[i].toStringType();
                //alert(txt3);
                $content.append('<li> <span class="itemLeft">'+txt1+'</span> <span class="itemMiddle">'+txt2+'</span> <span class="itemRight">'+txt3+'</span><b class="deleteIcon"> X </b>');

            }
        }



        $("main .content").append($content);

        return false;
    });
});