jQuery:有没有办法让它更简洁、更优雅?

时间:2022-07-19 07:37:20

I have a code that looks like this:

我的代码是这样的:

<div id="wrapper">
        <img id="first"  class="images" src="img/nike.jpg" />
        <img  id ="second" class = "images" src="img/golden.jpg" />
        <img id = "third" class ="images" src ="img/a.jpg" />
        <img id = "fourth" class="images" src="img/God__s_Canvas_by_Delacorr.jpg" />
    </div>

I want to wrap each img with <a name = n> dynamically. So my solution was to do this:

我想用动态地包装每个img。所以我的解决办法是:

$(".images").wrap('<a></a>')
$("#wrapper a").each(function(n) {
            $(this).attr('name', n);
        })

Is it possible to chain the 2 statements into 1 statement? I know that jQuery is particularly do elegant chaining so I think it's definitely possible. I just don't know how to yet.

是否有可能把这两个语句串成一个语句?我知道jQuery特别擅长优雅的链接,所以我认为它绝对是可能的。我只是还不知道怎么做。

3 个解决方案

#1


4  

This isn't exactly the same because it doesn't wrap .images outside of #wrapper, but it's close. It creates the in the loop and immediately applies the attribute.

这并不是完全相同的,因为它不在#包装器外面包装。images,但是它很接近。它在循环中创建并立即应用属性。

$('#wrapper img').each(function(n) { 
    $(this).wrap($('<a></a>').attr('name', n));
}

#2


3  

this might work...

这可能会奏效…

$(".images").wrap('<a></a>').parent().each(function(n) {$(this).attr('name', n);});

#3


0  

I don't think you could, because you are referencing two separate collections of objects. The $() will return an array of matched items. In the case of your first implementation, you're pulling each image with a class of 'image' and wrapping them with the anchor tags. With your second implementation you're pulling all of the anchor tag elements within your 'wrapper' div, and applying the name attribute. These are two distinctly different collections, with the second one not even being available until after you've completed the first statement.

我不认为你可以,因为你正在引用两个不同的对象集合。$()将返回匹配项的数组。在第一个实现的情况下,使用“image”类提取每个映像,并用锚标记将它们包装起来。通过第二个实现,您将在“包装器”div中提取所有锚标记元素,并应用name属性。这是两个完全不同的集合,第二个集合直到您完成第一个语句之后才可用。

Now, Dan's implementation above might do the trick. Not the chaining you were looking for, but seems on the money.

现在,Dan上面的实现可能会起到作用。不是你想要的链接,而是钱。

#1


4  

This isn't exactly the same because it doesn't wrap .images outside of #wrapper, but it's close. It creates the in the loop and immediately applies the attribute.

这并不是完全相同的,因为它不在#包装器外面包装。images,但是它很接近。它在循环中创建并立即应用属性。

$('#wrapper img').each(function(n) { 
    $(this).wrap($('<a></a>').attr('name', n));
}

#2


3  

this might work...

这可能会奏效…

$(".images").wrap('<a></a>').parent().each(function(n) {$(this).attr('name', n);});

#3


0  

I don't think you could, because you are referencing two separate collections of objects. The $() will return an array of matched items. In the case of your first implementation, you're pulling each image with a class of 'image' and wrapping them with the anchor tags. With your second implementation you're pulling all of the anchor tag elements within your 'wrapper' div, and applying the name attribute. These are two distinctly different collections, with the second one not even being available until after you've completed the first statement.

我不认为你可以,因为你正在引用两个不同的对象集合。$()将返回匹配项的数组。在第一个实现的情况下,使用“image”类提取每个映像,并用锚标记将它们包装起来。通过第二个实现,您将在“包装器”div中提取所有锚标记元素,并应用name属性。这是两个完全不同的集合,第二个集合直到您完成第一个语句之后才可用。

Now, Dan's implementation above might do the trick. Not the chaining you were looking for, but seems on the money.

现在,Dan上面的实现可能会起到作用。不是你想要的链接,而是钱。