อินพุตตัวเลือก jquery [type = text] ')

100

ฉันเขียนโค้ดที่เลือกinput type=textองค์ประกอบทั้งหมดโดยทั่วไปดังนี้:

$('.sys input[type=text]').each(function () {}

ฉันจะเปลี่ยนเป็นเลือกinput[type=text]หรือselect?

javascript jquery

— แจ็ค
แหล่งที่มา

178

การใช้ตัวเลือก css ปกติ:

$('.sys input[type=text], .sys select').each(function() {...})

หากคุณไม่ชอบการทำซ้ำ:

$('.sys').find('input[type=text],select').each(function() {...})

หรือกระชับกว่านั้นให้ส่งผ่านcontextข้อโต้แย้ง:

$('input[type=text],select', '.sys').each(function() {...})

หมายเหตุ: ภายในjQueryจะแปลงข้างต้นเป็นfind()เทียบเท่า

http://api.jquery.com/jQuery/

บริบทตัวเลือกจะถูกใช้งานด้วยเมธอด. find () ดังนั้น $ ('span', this) จึงเทียบเท่ากับ $ (this) .find ('span')

ฉันเองพบว่าทางเลือกแรกที่อ่านได้มากที่สุด :) ของคุณ

— Andreas Wong
แหล่งที่มา

1

นับตั้งแต่context formมีการใช้find formที่find formมีประสิทธิภาพมากขึ้นกว่าcontext form(ฟังก์ชั่นการโทรหนึ่งหลีกเลี่ยง) ใช้ได้กับตัวเลือกที่ใช้เกือบทั้งหมด จากนั้น IMO find formจะมีประสิทธิภาพมากกว่าnormal CSS selectorเนื่องจากทั้งสองส่วนของตัวเลือกนั้นสัมพันธ์กับโหนดรูทโดยที่ในส่วนfind formนั้นมีเพียง.sysส่วนที่สัมพันธ์กับมันจากนั้นinput[type=text],selectจะถูกดำเนินการกับชุดองค์ประกอบที่เล็กกว่ามากดังนั้นจึงอาจเร็วกว่า (แต่จำเป็นต้องตรวจสอบโดยการทดสอบ)

— pomeh

1

@pomeh ฉันเห็นว่าคุณมาจากไหน แต่ถ้าประสิทธิภาพของการ$โทรมีความสำคัญต่อแอปของคุณโปรดหลีกเลี่ยงการใช้ jQuery โดยสิ้นเชิง :) คำตอบนี้พยายามตอบคำถามของ OP หากเป็นคำถามเกี่ยวกับประสิทธิภาพคำตอบนี้จะไม่อยู่ที่นี่ตั้งแต่แรก ขอบคุณสำหรับความคิดเห็น :) ขอขอบคุณ

— Andreas Wong

1

ความคิดเห็นของฉันไม่ได้เกี่ยวกับความสมบูรณ์แบบในการ$โทรเพียงครั้งเดียวแต่เกี่ยวกับการ$โทรทั้งหมดที่มีอยู่ในเสียงปรบมือเดียว IMO เมื่อคุณมีวิธีต่างๆในการทำสิ่งเดียวกันฉันจะพยายามเลือกวิธีที่มีประสิทธิภาพดีกว่าเสมอ slow performance=== unhappy users. นอกจากนี้เรายังสามารถทั้งตอบคำถามของ OP ที่มีคำตอบหลาย ๆ (ตามที่คุณได้) และข้อได้เปรียบที่มีให้ / ไม่สะดวกของแต่ละของพวกเขา (ที่ผมทำในความคิดเห็น) IMO เป็นสิ่งสำคัญที่จะต้องสังเกตว่าทำไมคำตอบทั้งหมดจึงแตกต่างกันในขณะที่ให้ผลลัพธ์เดียวกัน นอกจากนี้เรายังสามารถเขียนโค้ดวานิลลา JavaScript ที่ทำงานช้าได้: JavaScript! ==performance

— pomeh

1

@pomeh ประเด็นของฉันเกี่ยวกับประสิทธิภาพคือถ้าคุณสนใจเกี่ยวกับประสิทธิภาพจริงๆอย่าใช้ jQuery $จัดประเภท div ของคุณโดยเฉพาะและใช้document.getElemenById/ElementsByClassNameแทนที่จะดำเนิน$การตรวจสอบ / แยกวิเคราะห์สตริงของตัวเลือกของคุณเป็นจำนวนมาก jQuery ไม่ได้มีชื่อเสียง สำหรับไลบรารีนักแสดง และฉันไม่เคยเห็นว่าแอปทำงานช้าลงเนื่องจากมีการโทรหาแอป$มากเกินไปหากคุณมีเว็บไซต์ที่มีปัญหาโปรดแสดงให้ฉันเห็นฉันสนใจมาก :)

— Andreas Wong

2

@pomeh ใช่ฉันเห็นด้วยอย่างยิ่งกับประเด็น JS ของคุณ! = ประสิทธิภาพ :) ในตอนท้ายของวันมันยังคงเดือดดาลสำหรับเราโปรแกรมเมอร์ที่จะเขียนโค้ดที่สมเหตุสมผล ขอบคุณสำหรับการสนทนาสั้น ๆ มีวันที่ดี :)

— Andreas Wong

7

$('.sys').children('input[type=text], select').each(function () { ... });

แก้ไข: อันที่จริงรหัสข้างต้นนี้เทียบเท่ากับตัวเลือกลูก ๆ.sys > input[type=text]หากคุณต้องการให้ลูกหลานเลือก ( .sys input[type=text]) คุณต้องใช้ตัวเลือกที่กำหนดโดย @NiftyDude

ข้อมูลมากกว่านี้:

— วอเตอร์เจ
แหล่งที่มา

คุณพิมพ์chilrenแทนchildren

— pomeh

5

หากคุณมีอินพุตหลายรายการเป็นข้อความในรูปแบบหรือตารางที่คุณต้องวนซ้ำฉันทำสิ่งนี้:

var $list = $("#tableOrForm :input[type='text']");

$list.each(function(){
    // Go on with your code.
});

สิ่งที่ฉันทำคือฉันตรวจสอบแต่ละอินพุตเพื่อดูว่าประเภทถูกตั้งค่าเป็น "ข้อความ" หรือไม่จากนั้นมันจะคว้าองค์ประกอบนั้นและเก็บไว้ในรายการ jQuery จากนั้นมันจะวนซ้ำผ่านรายการนั้น คุณสามารถตั้งค่าตัวแปรชั่วคราวสำหรับการวนซ้ำปัจจุบันได้ดังนี้:

var $currentItem = $(this);

สิ่งนี้จะตั้งค่ารายการปัจจุบันเป็นการวนซ้ำปัจจุบันของคุณสำหรับแต่ละลูป จากนั้นคุณสามารถทำอะไรก็ได้ที่คุณต้องการด้วยตัวแปร temp

หวังว่านี่จะช่วยทุกคน!

— Jason Cidras
แหล่งที่มา

3

$('input[type=text],select', '.sys');

สำหรับการวนซ้ำ:

$('input[type=text],select', '.sys').each(function() {
   // code
});

— thecodeparadox
แหล่งที่มา