Question

我在这段代码中做错了什么..

我应该使用这段代码获取前一个兄弟的类名..但是我得到了未定义的...我在哪里出错了

<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>JprevUntil</title>


<script  type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
$('.clickme').live('click',function(){
    alert($(this).prevUntil('li.lick').className);
});
</script>
</head>
<body>

  <div>
      <p id="hello">Hello World</p>
      <li class="lick">hello i am li</li>
      <a href="#">heello i am a</a>
      <p class="clickme">click</p>
  </div>

</body>
</html>

Answer 1

您可以使用siblings()和attr()方法，prevUnti不是您想要的：

获取每个元素的所有前面的兄弟节点，但不包括选择器，DOM节点或jQuery对象匹配的元素。

$('.clickme').live('click',function(){
    alert($(this).siblings('li').attr('class'));
});

className是一个javascipt核心元素属性，不能与jQuery对象一起使用，如果你想使用className，你可以试试这个：

$('.clickme').on('click',function() { // you can use on(). live() is deprecated
    alert($(this).siblings('li')[0].className);
});

Answer 2

这是因为你得到一个JQuery包装对象，试试：

$('.clickme').live('click',function(){
    alert($(this).prev('li.lick')[0].className);
});

如果您检查代码

$(this).prevUntil('li.lick')

你有：

-->$(this).prevUntil('li.lick'): e.fn.e.init[1]
       0: HTMLAnchorElement
       context: HTMLParagraphElement
       length: 1
       prevObject: e.fn.e.init[1]
       selector: ".prevUntil(li.lick)"
       __proto__: Object[0]

您的HTMLAnchorElement是一个DOM对象，您可以在此处检索您的className属性。

Answer 3

了解jQuery documentation对此的说法：

获取每个元素的所有前面的兄弟，但不包括元素由选择器，DOM节点或jQuery对象匹配。

你的元素不包括在内，因为你没有得到你想要的东西。

您可以尝试以下方法：

$('.clickme').live('click',function(){
    alert($(this).prevAll('li.lick').get(0).className);
});

<强>更新

似乎你想要实现的目标（获得最接近的兄弟姐妹）可以使用该代码完成（代码来自here）：

$('.clickme').live('click',function(){
    alert($(this).prevAll('li.lick:first').attr('class'));
});

FIDDLE

Answer 4

来自prevUntil api documentation

*获取每个元素的所有前面的兄弟，但 不包括选择器 ，DOM节点或jQuery对象匹配的元素。*

您期望prevUntil停留在li.lick但不包括在内。

您可以在此jsfiddle

中查看

Answer 5

这样做： -

参考 LIVE DEMO

HTML：

  <div>
      <li class="lick2">hello i am li 2</li>
      <p id="hello">Hello World</p>
      <li class="lick">hello i am li</li>
      <a href="#">heello i am a</a>
      <p class="clickme">click</p>
      <li class="lick1">hello i am li 2</li>
  </div>

JS：

$('.clickme').one('click',function(){
    alert($(this).prevAll('li').attr('class'));
});

输出：

lick

.prevUntil没有按预期工作

5 个答案:

HTML：

JS：

输出：