0

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

我应该使用此代码获取前一个兄弟的类名..但我越来越不确定..我哪里出错了

<!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>
4

5 回答 5

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);
});
于 2012-07-06T07:46:25.400 回答
1

这是因为您获得了一个 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 属性。

于 2012-07-06T07:48:51.427 回答
1

看看jQuery 文档对此有何评论：

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

不包括您的元素，这就是为什么您没有得到想要的东西。

您可以尝试以下方法：

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

更新：

似乎您想要实现的目标（获得最接近的先前兄弟）可以使用该代码完成（代码取自此处）：

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

小提琴

于 2012-07-06T07:51:43.040 回答
1

来自prevUntil api 文档

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

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

你可以在这个jsfiddle中看到

于 2012-07-06T07:53:49.133 回答
1

这样做： -

参考现场演示

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
于 2012-07-06T08:00:40.013 回答