Question

我有以下html：

<div id="myDiv1_" class="formElement1"><asp:TextBox ID="TextBox1" CssClass="formInput1" runat="server"></asp:TextBox></div><br />
<div id="myDiv2_" class="formElement1"><asp:TextBox ID="TextBox2" CssClass="formInput1" runat="server"></asp:TextBox></div><br />
<div id="myDiv3_" class="formElement1"><asp:TextBox ID="TextBox3" CssClass="formInput1" runat="server"></asp:TextBox></div>

我有以下jQuery代码：

$('input[type="text"]').focus(function () {
    $(this).addClass("formElement1");
});

$('input[type="text"]').blur(function () {
    $(this).removeClass("formElement1");
});

我想要做的是当输入框有焦点时我想改变div的类。我正在尝试更改$(this).addClass以使用类似$('#' + div_id + textbox_id').addClass的内容。

然而，对jQuery来说有点新，我不知道如何完成这个。任何帮助表示赞赏。

谢谢

Answer 1

您不需要选择器。只需遍历~~嵌套的~~父元素。

$(this.parentNode).addClass('whatever');

如果您绝对想要进行DOM选择，可以从ID中获取数字，并在嵌套ID中使用它。

var num = this.id.slice( -1 );
$('#myDiv' + num + '_').addClass('whatever');

编辑：我先把它颠倒了。我以为处理程序在<div>上。固定的。

Answer 2

要更改父div的类，请使用：

$('input[type="text"]').focus(function () {
    $(this).closest('div').addClass("formElement1");
});

$('input[type="text"]').blur(function () {
    $(this).closest('div').removeClass("formElement1");
});

最近的方法将搜索匹配

的第一个元素的dom（从此开始）

Answer 3

$('#' + div_id +' > #'+ textbox_id').addClass("formElement1")应该有效

Answer 4

尝试使用starts with选择器，因此$('div[id^=myDiv] input').focus(function(){$(this).addClass('focus');});也不要忘记removeClass('focus')上的blur()。

Answer 5

获取dom中文本框的父级并将类应用于它（在本例中为div）。您需要按如下方式更改代码：

$('input[type="text"]').focus(function () {
     $(this).parent().addClass("your-class");;
});

$('input[type="text"]').blur(function () {
     $(this).parent().addClass("your-class");;
});

Answer 6

从我收集的内容来看，你的输入都在div的里面（孩子们）。所以，你想要的东西是：

$('input[type="text"]').focus(function () {
    $(this).closest("div").addClass("formElement1");
});

这将找到最接近的父div并添加适当的类。

此外，如果您在此处使用ajax进行替换，则可能需要考虑使用live()：

$('input[type="text"]').live("focus", function () {
    $(this).closest("div").addClass("formElement1");
});

Answer 7

我假设每个文本框的ID都是唯一的，所以您可以这样做，并且不应该对将类添加到哪个元素存在歧义：

$('input[type="text"]').focus(function () {
    $('#' + textbox_id).addClass("formElement1");
}

如果您只想在正确的文本框获得焦点时更改类：

$('#' + textbox_id).focus(function () {
    $('#' + textbox_id).addClass("formElement1");
}

在jQuery中连接id

7 个答案: