下一次出现的东西，沿着DOM树

Question

我正在努力引用下一个带有包含特定字符串的ID的元素。

基本上，我有一个链接，我需要show() NEXT div充当容器进行编辑。

<div>
<a href="#" id="link-1">Link</a> // go from here
</div>

<div id="form-container-1" class="hidden"> // to here
<form>
...
</form>

重要提示：我不只是针对一个id ...表单容器id中“1”的目的是因为有几个。我正在使用“包含”选择器id*="form-container"

Answer 1

如果它直接进行当前项目，那么将起作用。

然后尝试使用parent()和next()的组合。这样，您就可以引用包含div的内容，然后找到下一个div。

工作示例：http://jsfiddle.net/PdatP/

jQuery的：

$('a').click(function(){
   $(this).parent().next().show(); 
});

Answer 2

这将获得下一个兄弟并显示该元素

    $('#link-1').next().show();

如果它不完全是下一个元素，则可以使用siblings方法;

   $('#link-1').siblings('#form-container-1').show();

或者，如果您想在其ID中显示包含form-container的所有元素

   $('#link-1').siblings('[id*="form-container"]').show();

Answer 3

如果您想根据ID动态查找要显示的正确表单，请执行以下操作：

$('a').click( function() {
   formId = $(this).attr('id').split('-')[1];
   $('#form-container-'+formId).show();
});

或者，如果您想在每个链接后找到下一个表单：

$('a').click( function() {
   $(this).next('form').show();
});

这两个方面，建议在链接中添加一个唯一的类，以显示表单并更新选择器。

Answer 4

$("#link-1").parent().next().show();