jQuery只选择第一个

Question

我的javascript

            $(".controls").click(function(event) {

                  var div = $(event.target).parents(".controls");

                  var a = $(div).find("tr .select");


            return false;
        });

和HTML

 <div id="grid1" class="controls">

    <a href="/projekt/create">Add</a>
    <a href="/projekt/edit">Edit</a>

</div>


<div id="grid2" class="controls">

    <a href="/uloha/create">Add</a>
    <a href="/uloha/edit">Edit</a>

    <table>
    <tr id="1"></tr>
    <tr id="2" class="select"></tr>
    <tr id="3"></tr>

    </table>

</div>

我想选择第一个有课程的TR select.我试过了

var a = $(div).find("tr:first .select");

要么

var a = $(div).find("tr .select:first");

但他们都没有工作.

Answer 1

我很确定你想要的是这个:

var a = $(div).find("tr.select:first");

在jQuery选择器中,空格分隔层次结构中的级别.

如果我使用了选择器,"tr:first .select"它会查看第一个tr并返回所有具有select类的子节点.

如果我使用了选择器,"tr .select:first"它会查看每个选择器tr并返回第一个子元素,每个元素都有select类tr.

Answer 2

你可以试试这个:

var a = $("tr.select", div).first();

要么

var a = $("tr.select:first", div);

因为有:first和first().

要在您使用的内容中选择所有这些:

$(this, that)

会这样的吗？

$(".controls").click(function(event) {
    var a = $("tr.select:first", ".controls");
    // do stuff with a....
    return false;
});

当你按下按钮时,这会改变"两个",但不会改为"四个".

<div class="controls">
    <input type="button" value="Click the control" />
</div>
<div id="grid2" class="controls">
    <table>
        <tr id="1"><td>one</td></tr>
        <tr id="2" class="select"><td>two</td></tr>
        <tr id="3"><td>three</td></tr>
        <tr id="4" class="select"><td>four</td></tr>
    </table>
</div>
<script type="text/javascript">
    $(".controls input").click(function(event) {
        var a = $("tr.select:first", ".controls");
        $(a).text("okay");
        return false;
    });
</script>

(作为旁注,那些不是正确的id名称,如果你想要valide html,它们不能以数字开头)