如何使用jQuery定位另一个元素中的元素

Question

我想在网页上的特定元素容器中定位某些<button>。

这是我的情况：

我正在尝试通过单击按钮“B3”来.show() 按钮的 B4 和 B5。

这是我的标记：

<tr>
  <td class="leftSide">
    <button class="b1" style="display:inline">B1</button>
    <button class="b2" style="display:inline">B2</button>
    <button class="b3" style="display:inline">B3</button>
  </td>
  <td>Some middle-ground content</td>
  <td class="rightSide">
    <button class="b4" style="display:none">B4</button>
    <button class="b5" style="display:none">B5</button>
  </td>
</tr>

这是我的 jQuery：

  $( '.b3' ).click(function() {
    $(this).hide();
    $(this).siblings('.b4').show(); // tried this and it does not work
    $(this).siblings('.b5').show(); // tried this and it does not work
    $(this).nearest('.b4').show(); // tried this but it throws an error
    $(this).nearest('.b5').show(); // tried this but it throws an error
    $(this).closest('.b4').show(); // tried this and it does not work
    $(this).closest('.b5').show(); // tried this and it does not work
    $(this).next('.b4').show(); // tried this and it does not work
    $(this).next('.b5').show(); // tried this and it does not work
    $(this).parent().find(".rightSide .b4").show(); // tried this and it does not work
    $(this).parent().find(".rightSide .b5").show(); // tried this and it does not work
});

是否可以访问右侧容器中的按钮？

Answer 1

您必须考虑路径，例如文件夹等。

您在left 文件夹中有按钮，并且想要访问right 文件夹的按钮。因此，您必须从 left 文件夹转到父文件夹并从那里开始，如下所示：

$(this).parent().find(".right .b4")

这就像在做../right/b4

Answer 2

试试这个。

我遍历了该元素的祖父母，我将在“.b4”类上执行查找并显示它

 $( '.b3' ).click(function() {
    console.log($(this).parentsUntil("tr").find(".b4"));
  $(this).parentsUntil("tr").find(".b4").show();
});

Js 小提琴 https://jsfiddle.net/xpvt214o/174861/

Answer 3

你好，你可以试试这个方法

$(function() {
   $('table .b3').on('click', function(){
    
    // $(this).parent().nextUntil('rightSide').next().show();
    // $(this).parent().find(".rightSide").next().show();
    // $(this).next('td').next('td').find('.b4').show();
    $(this).parent().next('td').next('td').find('.b4, .b5').show();
   })
});	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="leftSide">
    <button class="b1" style="display:inline">B1</button>
    <button class="b2" style="display:inline">B2</button>
    <button class="b3" style="display:inline">B3</button>
  </td>
  <td>Some middle-ground content</td>
  <td class="rightSide">
    <button class="b4" style="display:none;">B4</button>
    <button class="b5" style="display:none;">B5</button>
  </td>
</tr>
<tr>
  <td class="leftSide">
    <button class="b1" style="display:inline">B1</button>
    <button class="b2" style="display:inline">B2</button>
    <button class="b3" style="display:inline">B3</button>
  </td>
  <td>Some middle-ground content</td>
  <td class="rightSide">
    <button class="b4" style="display:none;">B4</button>
    <button class="b5" style="display:none;">B5</button>
  </td>
</tr>
</table>