Hongmu Notes
Home Language Notes Small problems with jquery each and splicing
Language Notes JavaScript

Small problems with jquery each and splicing

Small problems with jquery each and splicing

selector + traversal


$('div').each(function (i){
  i就是索引值
  this 表示获取遍历每一个dom对象
});

$('div').each(function (index,domEle){
  index就是索引值
 domEle 表示获取遍历每一个dom对象
});

Another traversal method

1) First get a collection object

2) Traverse each element of the collection object


var d=$("div");
$.each(d,function (index,domEle){
 d是要遍历的集合
 index就是索引值
 domEle 表示获取遍历每一个dom对
});

For string splicing problems, you can use double quotes and single quotes, and use them when appropriate.

Code used this time:


$(function(){
    $('.shiting').each(function (i){
        $(this).html('<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id='+ $(this).attr("data-songid") +'&auto=0&height=66"></iframe>')
    });
})

When writing a website to embed NetEase Cloud code, due to website optimization, the page needs to use less iframe framework, so I have to use jQuery to dynamically embed it.

微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

js move the mouse up to modify the style attribute

js move the mouse up to modify the style attribute Language Notes JavaScript

When the mouse hovers over the element, the color changes to red; when the mouse leaves the element, the color changes to black. To retrieve an element by its ID: `document.getElementById()`; Event handler for mouse hover: `onmouseover`; Event handler for mouse leave: `onmouseout`.<!DOCTYPE html><html lang= "en">...
👁 130

Recommended reading

(PC+WAP) Paint and Coatings Website Template – Home Improvement Website Source Code Download (1081)

(PC+WAP) Paint and Coatings Website Template – Home Improvement Website Source Code Download (1081) Practical Collection pbootcms Template

A paint and coating product page along with a PbootCMS website template compatible with both PC and WAP devices. Featuring a modern, practical design style, this template is ideal for showcasing paint and coating products, home decoration projects, and color schemes. It enables coating brands to showcase their products online and attract clients in the home decoration and construction industries. Template Display | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles...
👁 38
A single database record for WordPress operations

A single database record for WordPress operations Program Notes wordpress

I'm documenting my code – its primary function is to handle WordPress database connections and operations. Since I might need this again in the future, I've decided to record it here; this way, when I need to use it next time, I can simply copy and paste it. As it turns out, taking notes can really save some time! First code snippet: "`php // Include the WordPress core file: require_once(dirname(__FILE__));" `
👁 173
(Adaptive mobile version) Driving School Website Template – Driver's License Application Website Source Code Download – 1082

(Adaptive mobile version) Driving School Website Template – Driver's License Application Website Source Code Download – 1082 Practical Collection pbootcms Template

A PbootCMS website template designed for driving schools and driver's license application websites, compatible with both PC and WAP devices. Its professional and practical design makes it ideal for driving schools to showcase their training programs, instructor teams, and enrollment services. This template helps driving schools attract students online and enhance their brand awareness. Template Overview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles: Pboo...
👁 49
(Adaptive Mobile Version) Kitchen Waste Treatment Equipment Website Template 1083

(Adaptive Mobile Version) Kitchen Waste Treatment Equipment Website Template 1083 Practical Collection pbootcms Template

A PbootCMS website template for kitchen waste treatment equipment, compatible with both PC and WAP devices. Its modern, tech-driven and eco-friendly design is ideal for showcasing kitchen waste treatment systems, technical solutions, and the environmental benefits of such equipment. This template helps environmental equipment manufacturers showcase their products online and attract municipal and commercial clients. Template Display | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.c...
👁 49
Resource website typecho001 template

Resource website typecho001 template Program Notes Typecho

typecho001 template template please do not modify the folder name of this template. The folder name is: typecho001 1.4 Fix the js output problem on the article page 1.3 Fix the error prompt when the plug-in is not installed Optimize the list page code output 1.2 Fix the comment function and add a custom homepage title 1.1 Fix the comment reply asymmetry function Add a separate title setting function on the homepage Add the website favicon.ico icon Add one...
👁 198
(Adaptive mobile version) Travel blogging website template – Personal blog website source code download – 1084

(Adaptive mobile version) Travel blogging website template – Personal blog website source code download – 1084 Practical Collection pbootcms Template

A PbootCMS website template designed for both PC and WAP devices, perfect for travel blogs and personal blogs – ideal for travel enthusiasts to share their travel stories, guides, and photos. It helps travel bloggers attract online followers and build their personal brand. Template Preview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles: Pb...
👁 49