使用jQuery选择下一个标记

我有一个

select

和2个

td

标签，如下所示

<select name="accesslevel"><option value="A1">A1</option>
<option value="A2">A2</option></select>

<td id="Level3">

<td id="Level4">

A1
A2

如果在“选择并显示具有级别4 id的td”中选择了A1，则我需要隐藏具有级别3 id的

td

，反之亦然

这种组合在html中重复了很多次，因此，我只能在使用jQuery的

select

标记之后找到下一个

td

---

有人能帮忙吗？

假设您的选择也在同一TR的TD内

$("#accesslevel").change(function(){ //give an id to your select box
  if(condition){
    $(this).parent().nextAll("#Level3").hide();
    $(this).parent().nextAll("#Level4").show();
  }
});

这只是给你一个想法。显然，您可以通过将父节点存储在变量中，然后搜索其他节点来优化代码

---

这个想法是找到父TD，然后使用nextAll找到其他TD。您还可以找到父行TR，然后使用TR.children（“Level3”）

而不查看所有标记，我想知道您的

是否应该包装在

中

如果您的

元素具有ID，则不会在整个代码中“重复”，因为ID对每个元素都是唯一的-该

:lt（2）

过滤器将仅检索索引

0

和

1

的元素

$(document).ready(function(){    
    $("select[name='accesslevel']").change(function(){    
    if($(this).val()=="A1")    
    {    
        $(this).parent().next().find("td[id='Level3']").show();    
        $(this).parent().next().find("td[id='Level4']").hide();     
    }     
    if($(this).val()=="A2")     
    {
        $(this).parent().next().find("td[id='Level3']").hide();    
        $(this).parent().next().find("td[id='Level4']").show();    
    }
    });
});

---

参见一个工作示例

为什么不使用

#Level3

而不是长遍历链

id

s是唯一的，不需要遍历DOM来获取element@YiJiang，因为这是在一个表标记中，所以每一行都可以有相同id的元素，特别是在服务器使用PHP/ASPI生成HTML的情况下，很遗憾，与几乎所有其他语言不同，我们假设OP的代码是无效的，而不是有效的？但是，是的，我同意，在这样的情况下，安全总比抱歉好…只有在有一排的情况下，这才有效。添加具有相同ID的元素的多行后，它将隐藏所有行中的所有元素

$('select#someId').change(function() {
  var $nextTds = $(this).parents('td:first').nextAll('td:lt(2)');
  //manipulate $nextTds
]

$(document).ready(function(){    
    $("select[name='accesslevel']").change(function(){    
    if($(this).val()=="A1")    
    {    
        $(this).parent().next().find("td[id='Level3']").show();    
        $(this).parent().next().find("td[id='Level4']").hide();     
    }     
    if($(this).val()=="A2")     
    {
        $(this).parent().next().find("td[id='Level3']").hide();    
        $(this).parent().next().find("td[id='Level4']").show();    
    }
    });
});