你如何使用Jquery在链中倒退?

时间:2011-03-15 20:10:57

标签: jquery

我认为jquery中有一些东西允许你通过链条向后移动。

我想这样做:

var a = $(this).parent().addClass('test').goBackToParent().children('selectorHere').text()

我想获取我拥有的对象的父级,并为其添加一个类名。一旦我这样做,我想通过它的孩子,找到一个与我的选择器匹配的孩子并获得它的文本。

我可以这样做,还是我必须这样做:

$(this).parent().addClass('test');
var a = $(this).parent().children('selectorHere').text()

修改

我现在正在使用“结束”,但它不起作用我做了一个例子,你可以尝试 here

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <table>
    <th>
      <tr>one</tr>
      <tr>two</tr>
    </th>
    <tr>
      <td id="test"><a href="#"><img src="http://ais.web.cern.ch/ais/apps/hrt/SMT%20v2/Images/btnbar_edit.png" /></a></td>
      <td class="selectMe">1</td>
    </tr>
  </table>
</body>
</html>


$(function()
  {
      $('#test').click(function()
                       {
                           // does not work
                           var a = $(this).parent().addClass('afb').end().children('.selectMe').text();
                           // works
                           var b = $(this).parent().children('.selectMe').text();
                         alert(a + ' -should have value');
                          alert(b + ' -works');
                         return false;
                       });
  });

3 个答案:

答案 0 :(得分:29)

您正在寻找end()方法:

var a = $(this).parent().addClass('test').end()
               .children('selectorHere').text();

方法:

  

结束最近的过滤   在当前的链中运作   返回匹配元素集   它以前的状态。

更新:根据您的html代码段,您实际上根本不需要end!关于jQuery的重要一点是,大多数非遍历方法返回自己的副本 - 所以如果你调用$(this).addClass('test'),你会得到$(this)的副本。

所以对于你的代码片段:

// does not work
var a = $(this)                       // points at #test
           .parent()                  // now refers to the tr which holds test
               .addClass('afb')       // still refers to the tr
               .end()                 // now we're back to #test
           .children('.selectMe')     // empty! there are no direct children of #test which match .selectMe
               .text();               // empty

相反,尝试没有结束:

// works
var a = $(this)                       // points at #test
           .parent()                  // now refers to the tr which holds test
               .addClass('afb')       // still refers to the tr
           .children('.selectMe')     // found the .selectMe td
               .text();               // returns '1'

答案 1 :(得分:7)

您正在寻找方法end()。只需使用它代替goBackToParent()

  

大多数jQuery的DOM遍历方法   在jQuery对象实例上运行   并产生一个新的,匹配一个   不同的DOM元素集。什么时候   发生这种情况,就好像新的一样   将元素推入堆栈   在对象内维护。   每种连续的过滤方法   将一个新元素集推送到   堆。如果我们需要一个旧元素   设置,我们可以使用end()弹出集合   退出堆栈。

答案 2 :(得分:5)

请参阅.end()