Javascript 在激发其他子元素时修改子元素
我有很多具有相同子内容的父元素。 当一个事件被激发到一个子级时,对同一父级的另一个子级执行一些操作 例如:Javascript 在激发其他子元素时修改子元素,javascript,parent-child,Javascript,Parent Child,我有很多具有相同子内容的父元素。 当一个事件被激发到一个子级时,对同一父级的另一个子级执行一些操作 例如: <div class='wrap'> <textarea></textarea> <a href=''></a> </div> <div class='wrap'> <textarea></textarea> <a href=''><
<div class='wrap'>
<textarea></textarea>
<a href=''></a>
</div>
<div class='wrap'>
<textarea></textarea>
<a href=''></a>
</div>
<div class='wrap'>
<textarea></textarea>
<a href=''></a>
</div>
如何处理此问题?您正在寻找(应用于事件处理程序中的$(this)
),或者可能是and的组合(如果其他元素可能处于不同级别,在您的示例中不是这样)
示例-兄弟姐妹
:
示例-最近的
+查找
:
那么,你尝试了什么,为什么失败了?第一个对我不起作用,但是第二个(最近的+发现)对我起作用。非常感谢@IvorySantos:它们都使用问题中的标记(参见我添加的实时示例)。正如我在回答中所说的那样,
同级
将只处理相同级别的元素(触发事件的元素的同级)。很高兴这有帮助。@T.JCrowder我很好奇这就是为什么我再次尝试使用兄弟姐妹。但我不能让它工作。我不知道怎么了。也许我现有的一些代码使这个功能有问题。Thanks@IvorySantos:最可能的情况是,您选择的元素不是触发事件的元素的同级元素。例如:
在那里,a
元素不是textarea
的同级元素。
< textarea > onkeyup (from parent A) change the background-color of < a > (from parent A)
$(".wrap textarea").on("keyup", function() {
var link = $(this).siblings("a");
link.css("background-color", "green");
});
$(".wrap textarea").on("keyup", function() {
var link = $(this).closest(".wrap").find("a");
link.css("background-color", "green");
});