jQuery 查找“第 n 个子级”价值

发布于 2024-09-03 12:19:25 字数 388 浏览 6 评论 0原文

我有一个 ul 设置为导航，我将在悬停时为其设置动画。

由于所有导航项都有不同的宽度，我将把它们的默认宽度存储在一个数组中，以便在悬停时，这些宽度可以传递回 animate 方法。

我需要一种方法来查找元素的“第 n 个子元素”，以便从数组中检索正确的宽度。

像这样：

var count = $(this).count(); //obviously this isn't right!

这样我就可以做：

$(this).animate({'width':array(count)}, 400);

任何建议都会对我有很大帮助 - 如果有更好的方法来做这种事情，我很乐意接受指点！

原文

I have a ul set up as navigation, which I'll be animating on hover.

As all the nav items are different widths, I'll be storing their default widths in an Array, so that on hover out, these widths can be passed back in to the animate method.

What I need is a way to find what 'nth-child' the element is in order to retrieve the correct width from the array.

Something like:

var count = $(this).count(); //obviously this isn't right!

So that then I can do:

$(this).animate({'width':array(count)}, 400);

Any suggestions would help me a lot - and if there's a better way to do this kind of thing I'd gladly accept pointers!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人海汹涌 2024-09-10 12:19:25

我认为 index 就是您要寻找的。它告诉您某个元素相对于其兄弟元素的位置，例如，父元素中的第二个元素是索引 1。您可以使用选择器，这样您就只考虑某些兄弟元素而不考虑其他元素，等等。

回复收藏 0 原文

姐不稀罕 2024-09-10 12:19:25

如果您确实想存储最后的宽度，请使用 .data()在每个

中

东西

$('ul li').css('width', function(i,v){
  $(this).data('lastWidth',v);
  return v;
})

类似这样的

$('li').animate({'width': $(this).data('lastWidth') }, 400);

，这是一个粗略的例子，但我想它比数组更好......这样，你就可以确定每个

保持正确的值......

if you really want to store the last width, use .data() in each <li>

something like

$('ul li').css('width', function(i,v){
  $(this).data('lastWidth',v);
  return v;
})

then something like,

$('li').animate({'width': $(this).data('lastWidth') }, 400);

this is a rough example but I guess it's better than array... in this way, you are sure each <li> is holding the right value....

回复收藏 0 原文

悍妇囚夫 2024-09-10 12:19:25

像这样的html

<ul id="ul">
    <li style="width: 50px;">1</li>
    <li style="width: 75px;">2</li>
    <li style="width: 100px;">3</li>
</ul>

和像这样的脚本

$(function(){

    arrayOfWidth = [];
    liItems = $('#ul li');
    someLi = $('#ul li:eq(1)'); // just for example

    liItems.each(function(index, domElement){
        var $this = $(domElement);
        arrayOfWidth.push($this.width());
    });

    alert(getWidth(someLi));

});

function getWidth(li){
    var index = liItems.index(li);
    return arrayOfWidth[index];
}

html like this

<ul id="ul">
    <li style="width: 50px;">1</li>
    <li style="width: 75px;">2</li>
    <li style="width: 100px;">3</li>
</ul>

and script like this

$(function(){

    arrayOfWidth = [];
    liItems = $('#ul li');
    someLi = $('#ul li:eq(1)'); // just for example

    liItems.each(function(index, domElement){
        var $this = $(domElement);
        arrayOfWidth.push($this.width());
    });

    alert(getWidth(someLi));

});

function getWidth(li){
    var index = liItems.index(li);
    return arrayOfWidth[index];
}

回复收藏 0 原文

~没有更多了~