如何使用 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”执行查找 class 并显示

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

Js fiddle 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>

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

How to target elements in another element using jQuery

jquery

button

next

siblings

closest