একটি বড় এইচটিএমএল-স্ট্রিং থেকে একটি jQuery অবজেক্ট তৈরি করা


140

আমার কাছে একাধিক চাইল্ড-নোডযুক্ত একটি বড় এইচটিএমএল-স্ট্রিং রয়েছে।

এই স্ট্রিংটি ব্যবহার করে কোনও jQuery DOM অবজেক্ট তৈরি করা সম্ভব ?

আমি চেষ্টা করেছি $(string)তবে এটি কেবলমাত্র পৃথক নোডযুক্ত একটি অ্যারে দেয় returns

আমি .find () ফাংশনটি ব্যবহার করতে পারি এমন একটি উপাদান পেতে ইমট্রি করা হচ্ছে।


এইচটিএমএল কোথায়, আপনি এটি দিয়ে কি নির্মাণ করতে চান? আপনি .find () ফাংশনটি দেখতে চাইতে পারেন: api.jquery.com/find
নিয়ন্ত্রণ ফ্রিক

3
একটি jQuery অবজেক্ট সমস্ত নোডযুক্ত একটি অ্যারের মতো অবজেক্ট। আপনি যেটি অর্জন করার চেষ্টা করছেন তা কি বিশদভাবে বলতে পারেন?
ফ্রিডরিক হামিদি

'এই স্ট্রিং' কোথায়? কি স্ট্রিং?
ভিজেভিঞ্জারটিজেস

এখানে একবার দেখুন, আমি মনে করি এটি আপনি যা চান স্ট্যাকওভারফ্লো.com
q/759887/

আমি উপাদানটি একটি স্ট্রিংয়ের মাধ্যমে একটি ওয়েবভিউ থেকে অন্যটিতে যেতে হবে, স্ট্রিংটি কেবলমাত্র সেই উপাদানটির এইচটিএমএল উত্স হবে। আমি মনে করি jQuery অবজেক্টটি কী তা আমি ভুল বুঝতে পেরেছি।
ব্যবহারকারী 1033619

উত্তর:


200

হালনাগাদ:

JQuery 1.8 থেকে, আমরা $ .parseH HTML ব্যবহার করতে পারি , যা এইচটিএমএল স্ট্রিংকে ডিওএম নোডের একটি অ্যারে পার্স করবে। উদাহরণ:

var dom_nodes = $($.parseHTML('<div><input type="text" value="val" /></div>'));

alert( dom_nodes.find('input').val() );

ডেমো


var string = '<div><input type="text" value="val" /></div>';

$('<div/>').html(string).contents();

ডেমো

এই কোডে কি হচ্ছে:

  • $('<div/>')এটি একটি জাল <div>যা ডিওএম-তে নেই
  • $('<div/>').html(string)শিশু হিসাবে stringযে জাল মধ্যে সংযোজন<div>
  • .contents()সেই নকলের বাচ্চাদের <div>jQuery অবজেক্ট হিসাবে পুনরুদ্ধার করে

আপনি যদি কাজ করতে চান .find()তবে এটি ব্যবহার করে দেখুন:

var string = '<div><input type="text" value="val" /></div>',
    object = $('<div/>').html(string).contents();

alert( object.find('input').val() );

ডেমো


1
@ ব্যবহারকারী 1033619 আপনি অপারেশনও করতে পারেন .find(), ডেমোটি পরীক্ষা করে দেখুন
thecodeparadox

তবে কীভাবেstring = '<input type="text" value="val" />'
fdrv

1
আপনি যদি করতে পারেন তবে আপনি $("<div/>")কেন পারবেন না $(string)?
xr280xr

2
আরও জটিল এইচটিএমএল সহ আমার এটিকে কাজ করতে পেতে। সামগ্রীগুলি সরিয়ে ফেলতে হবে। jsfiddle.net/h45y2L7v
সাইমন হাচিসন

আপনি $ (স্ট্রিং) করতে চান না কারণ এর সামগ্রীগুলি পেতে আপনার মোড়কের ডিভি দরকার। আপনি ডিভের বিষয়বস্তু পাবেন, যা আপনার ইনপুট হবে।
মাইকেল খলিলি

120

JQuery 1.8 হিসাবে আপনি আপনার jQuery অবজেক্ট তৈরি করতে পার্সএইচটিএমএল ব্যবহার করতে পারেন:

var myString = "<div>Some stuff<div>Some more stuff<span id='theAnswer'>The stuff I am looking for</span></div></div>";
var $jQueryObject = $($.parseHTML(myString));

আমি একটি জেএসফিডেল তৈরি করেছি যা এটি দেখায়: http://jsfiddle.net/MCSyr/2/

এটি স্বেচ্ছাসেবী এইচটিএমএল স্ট্রিংটিকে jQuery অবজেক্টে পার্স করে এবং ফলাফলটি একটি ডিভিতে প্রদর্শিত করতে ব্যবহার করে।


10
আমি এই উত্তরটি আরও ভাল দেখতে পাচ্ছি, যেহেতু এটি কোনও ভুত ডিভ উপাদান ব্যবহার করতে হবে না। p .parseHtml ftw।
জিকোডার

2
আমি যখন তখন wanted jQueryObject.find () এ চেয়েছিলাম তখন এই উত্তরটি আমার পক্ষে কার্যকর হয়নি, আমি অনুমান করি কারণ এটি তখন ডোমে যুক্ত হয়নি n't
দুগজম্যাকডোনাল্ড

@ ডগজম্যাকডোনাল্ড - ডোমে কন্টেন্ট যুক্ত না করেই কাজ করা উচিত find আপনি যদি আমার ফিডলটি দেখুন ( jsfiddle.net/MCSyr/2 ), আমি jQuery অবজেক্টের সন্ধানের কল করছি, এবং এটি প্রত্যাশার ফলাফল হিসাবে প্রত্যাবর্তন করবে: Qu jQueryObject.find ("# দ্য অ্যাঞ্জার") h এইচটিএমএল ()
কিপ্রেনে

1
@ কিপ্রেণি আকর্ষণীয়, আমি এটি আমার জন্য উদাহরণটি খনন করব এবং দেখব যে এর আগে অন্য কিছু ছিল কিনা। এটি অন্য একটি যুক্তিযুক্ত বোঝার ভিতরে একটি টাইপস্ক্রিপ্ট মডিউলে লেখা হয়েছিল, অন্যরকম সমস্যা হতে পারে! আমার ক্ষমা।
Duggmmddonald

8
পার্সএইচটিএমএল jQuery 1.8 এ
জিন-মিশেল গার্সিয়া

12
var jQueryObject = $('<div></div>').html( string ).children();

এটি একটি ডামি জিকুয়েরি অবজেক্ট তৈরি করে যাতে আপনি স্ট্রিংটি এইচটিএমএল হিসাবে রাখতে পারেন। তারপরে, আপনি কেবল বাচ্চাদের পান।


2
ive চেষ্টা করেছে, তবে এটি আমাকে পরে ব্যবহার করতে হবে। ফাইন্ড () ফাংশনের সাথে কাজ করে না।
ব্যবহারকারী 1033619

3
@ user1033619 এর .filter()পরিবর্তে আপনি ব্যবহার করতে পারেন .find()
কুলবীর সাইনি

2

এর জন্য বিশেষভাবে ডিজাইন করা চিরিও নামে একটি দুর্দান্ত গ্রন্থাগারও রয়েছে ।

সার্ভারের জন্য বিশেষভাবে ডিজাইন করা কোর jQuery এর দ্রুত, নমনীয় এবং হেলান বাস্তবায়ন।

var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <h2 class="title welcome">Hello there!</h2>

1

আমি আমার এইচটিএমএল টেমপ্লেটগুলির জন্য নিম্নলিখিতটি ব্যবহার করি:

$(".main").empty();

var _template = '<p id="myelement">Your HTML Code</p>';
var template = $.parseHTML(_template);
var final = $(template).find("#myelement");

$(".main").append(final.html());

দ্রষ্টব্য: ধরে নিচ্ছেন আপনি jQuery ব্যবহার করছেন কিনা


1

$ (স্ট্রিং) কাজ করছে না তার কারণ হ'ল jquery $ () এর মধ্যে এইচটিএমএল সামগ্রী খুঁজে পাচ্ছে না। অতএব আপনাকে প্রথমে এটি HTML এ বিশ্লেষণ করতে হবে। একবার আপনার যদি কোনও ভেরিয়েবল থাকে যা আপনি এইচটিএমএলকে বিশ্লেষণ করেন। তারপরে আপনি $ (স্ট্রিং) ব্যবহার করতে পারেন এবং অবজেক্টে উপলব্ধ সমস্ত ফাংশন ব্যবহার করতে পারেন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.