วิธีรับองค์ประกอบ DOM จาก JQuery Selector

179

ฉันมีช่วงเวลาที่ยากลำบากในการค้นหา DOMElement จริงจากตัวเลือก jquery รหัสตัวอย่าง:

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

และอีกส่วนหนึ่งของรหัสฉันพยายามกำหนดค่าที่เลือกของช่องทำเครื่องหมาย

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

และโปรดฉันไม่ต้องการทำ:

  if ( checkbox.eq(0).is(":checked"))
    //do something

นั่นเป็นของฉันรอบกล่องกาเครื่องหมาย แต่เวลาอื่น ๆ ที่ฉันต้องการ DOMElement ที่แท้จริง

javascript jquery dom

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

4

กรณีหนึ่งซึ่งจำเป็นต้องใช้สิ่งนี้: ใน Knockout.js ฟังก์ชันapplyBindingsคาดว่าโหนด DOM ไม่ใช่ตัวเลือก jQuery คำถามนี้ (และคำตอบ) เป็นสิ่งที่ต้องการ

— มูฮัมหมัด Alkarouri

264

คุณสามารถเข้าถึงองค์ประกอบ DOM ดิบด้วย:

$("table").get(0);

หรือมากกว่านั้น:

$("table")[0];

อย่างไรก็ตามมีไม่มากที่คุณต้องการสิ่งนี้ (ในประสบการณ์ของฉัน) นำตัวอย่างช่องทำเครื่องหมายของคุณ:

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

เป็น "jquery'ish" มากกว่าและกระชับ (imho) มากกว่า ถ้าคุณต้องการที่จะให้หมายเลขพวกเขา?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

คุณสมบัติบางอย่างเหล่านี้ยังช่วยปกปิดความแตกต่างในเบราว์เซอร์ด้วย คุณลักษณะบางอย่างอาจแตกต่างกัน ตัวอย่างคลาสสิกคือการโทร AJAX การทำเช่นนี้ได้อย่างถูกต้องใน Javascript ดิบมีประมาณ 7 XmlHttpRequestกรณีทางเลือกสำหรับ

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

1

ขอบคุณ แต่วิธี get ยังคงส่งคืนองค์ประกอบ jquery ไม่ใช่องค์ประกอบ dom มิฉะนั้นการเรียกคุณสมบัติ. checked จะทำงานได้

— BillRob

ลอง$('a').get(0).nodeType==1ใน Firebug ในหน้านี้มันประเมินว่าเป็นจริงหรือล้มเหลว?

— Meder omuraliev

@BillRob ถ้า get () ไม่ส่งคืนองค์ประกอบ DOM มีบางอย่างผิดปกติ ดูเอกสารได้ที่นี่: docs.jquery.com/Core/get#index

— Sixten Otto

$('<input type=checkbox>').appendTo('body').get(0).checked

— meder omuraliev

5

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

— meder omuraliev

7

แก้ไข: ดูเหมือนว่าฉันผิดในสมมติว่าคุณไม่สามารถรับองค์ประกอบ ตามที่คนอื่นโพสต์ที่นี่คุณสามารถรับมันด้วย:

$('#element').get(0);

ฉันตรวจสอบแล้วว่าสิ่งนี้ส่งคืนองค์ประกอบ DOM ที่ตรงกัน

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

2

ทำซ้ำตัวเอง แต่อีกครั้ง ... ไม่ใช่ในเบราว์เซอร์ทั้งหมด ล้มเหลวใน IE7 และรุ่นก่อนหน้า

— Slavo

6

ฉันต้องการรับองค์ประกอบเป็นสตริง

jQuery("#bob").get(0).outerHTML;

ซึ่งจะให้สิ่งที่คุณชอบ:

<input type="text" id="bob" value="hello world" />

... เป็นสตริงแทนที่จะเป็นองค์ประกอบ DOM

— ชาด Hedgcock
แหล่งที่มา

1

หากคุณต้องการโต้ตอบโดยตรงกับองค์ประกอบ DOM ทำไมไม่ใช้ document.getElementByIdเพราะถ้าคุณพยายามที่จะโต้ตอบกับองค์ประกอบเฉพาะที่คุณอาจจะรู้ id เพราะสมมติว่า classname อยู่ในองค์ประกอบเดียวเท่านั้นหรือตัวเลือกอื่น ๆ มีแนวโน้มที่จะ เสี่ยงดวง

แต่ฉันมักจะเห็นด้วยกับคนอื่น ๆ ว่าในกรณีส่วนใหญ่คุณควรเรียนรู้ที่จะทำสิ่งที่คุณต้องการโดยใช้สิ่งที่ jQuery มอบให้คุณเพราะมันยืดหยุ่นมาก

อัปเดต:ขึ้นอยู่กับความคิดเห็น: นี่คือโพสต์ที่มีคำอธิบายที่ดี: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

นี่จะคืนค่าถ้ามันถูกทำเครื่องหมายหรือ 0 ถ้าไม่ใช่

$(this).val() เป็นเพียงการเข้าถึงโดมและรับคุณลักษณะ "ค่า" ขององค์ประกอบไม่ว่าจะมีการตรวจสอบหรือไม่

— James Black
แหล่งที่มา

2

ฉันสามารถใช้ document.getElementById หรือวิธี MS ajax $ get ตั้งแต่ MS รับรอง jquery ฉันพยายามทำลายการพึ่งพา ms ajax javascript และเรียนรู้ jquery ดูเหมือนว่าทั้งหมดเคาน์เตอร์ง่ายที่ jquery จะเปลี่ยนพฤติกรรมของวิธีการช่องทำเครื่องหมาย. val () เช่นเดียวกับการเรียก. val () อื่น ๆ จะส่งกลับค่าเขตข้อมูลการโพสต์ jQuery ทำงานได้ดีมากดังนั้นมันจึงสับสนในการเปลี่ยนวิธี val () และหวังว่าจะหาวิธีแก้ปัญหาอย่างรวดเร็ว

— BillRob

2

เพื่อตรวจสอบหน้านี้: mail-archive.com/jquery-en@googlegroups.com/msg04461.html

— เจมส์สีดำ

2

นั่นเป็นเจมส์แปลก ๆ ที่วิธี val () เป็นจริง. atr ("ค่า") ฉันสงสัยว่าทำไมพวกเขาถึงมีสองวิธีที่แตกต่างกัน สำหรับฉัน .val () คือค่าของฟิลด์โพสต์แบบฟอร์ม

— BillRob

2

@BillRob - jQuery เป็นเพียงการทำให้ง่ายขึ้นและทำให้เป็นมาตรฐานวิธีการรับค่าแทนที่จะต้องไปที่องค์ประกอบจริงและทำมันเอง

— James Black

บางครั้งคุณต้องการตัวเลือกที่ซับซ้อนที่มี ID และสถานการณ์แม่ลูกและคุณสามารถรับมันผ่าน jQuery ด้วยโค้ดหนึ่งบรรทัด แต่ใช้เวลาหนึ่งวันในการใช้ document.getElementById ฉันยอมรับว่าการผสมไลบรารีเป็นความคิดที่ไม่ดี แต่มันก็เกิดขึ้นบางครั้งและงานในการรับองค์ประกอบ DOM จากวัตถุ jquery นั้นยากโดยเฉพาะอย่างยิ่งกับ. get (0) ที่ไม่มีเบราว์เซอร์ที่เข้ากันได้

— Slavo