উপাদানটির সঠিক মিল দ্বারা উপাদান নির্বাচন করুন


160

ঠিক আছে, আমি ভাবছি যদি সেখানে করতে একটি উপায় :contains()উপাদানের নির্বাচন করতে jQuery এর মধ্যে নির্বাচক শুধুমাত্র স্ট্রিং, যাতে টাইপ করা হয়

উদাহরণ স্বরূপ -

<p>hello</p>
<p>hello world</p>

$('p:contains("hello")').css('font-weight', 'bold');

নির্বাচক উভয় pউপাদান নির্বাচন করবে এবং তাদের সাহসী করবে, তবে আমি এটি কেবল প্রথমটি নির্বাচন করতে চাই।


ঠিক আছে, আপনি :containsনিজের কোড দিয়ে নির্বাচককে ওভাররাইড করতে পারেন , তবে আমি মনে করি না এটিই আপনি বোঝাতে চেয়েছিলেন?
ব্লেজমোনজার


: আপনি একটি কাস্টম নির্বাচক সংজ্ঞায়িত করতে পারে stackoverflow.com/questions/12244929/...
BLSully


উত্তর:


214

না, কোনও jQuery (বা CSS) নির্বাচক নেই যা এটি করে that

আপনি সহজেই ব্যবহার করতে পারেন filter:

$("p").filter(function() {
    return $(this).text() === "hello";
}).css("font-weight", "bold");

এটি কোনও নির্বাচক নয় , তবে এটি কাজটি করে। :-)

আপনি যদি "হ্যালো" এর আগে বা পরে সাদা স্থানটি পরিচালনা করতে চান তবে আপনি $.trimসেখানে একটি নিক্ষেপ করতে পারেন :

return $.trim($(this).text()) === "hello";

অকাল অপ্টিমাইজারগুলির জন্য, যদি আপনি এটি খেয়াল করেন না যে এটির সাথে মেলে না <p><span>hello</span></p>এবং তার অনুরূপ হয় তবে আপনি সরাসরি $এবং সরাসরি কল textব্যবহার করে কলগুলি এড়াতে পারবেন innerHTML:

return this.innerHTML === "hello";

... কিন্তু আপনি একটি আছে চাই অনেক অনুচ্ছেদের এটা কোন ব্যাপার জন্য, তাই অনেক আপনি সম্ভবত অন্যান্য বিষয় প্রথম আছে চাই। :-)


7
$.trimতুলনা করার আগে যেকোনও বিপথগামী হোয়াইটস্পেসে এটি চাইতে পারে ।
ব্লেজমোনজার

কোন কারণে আমাকে "==" এর পরিবর্তে "===" কাজ করার জন্য ব্যবহার করতে হয়েছিল।
স্টিফান 22'15

3
@ স্টেফান: আপনি যদি কোনও সংখ্যার সাথে তুলনা করে থাকেন তবে আপনাকে হয় ==( == 2) ব্যবহার করতে হবে বা একটি স্ট্রিংয়ে ( === "2") লাগাতে হবে , কারণ আপনি যে মানটি পেয়েছেন text()বা innerHTMLসর্বদা একটি স্ট্রিং is আপনি যদি কোনও স্ট্রিংয়ের সাথে তুলনা করে থাকেন তবে আপনি ব্যবহার করেন ==বা ব্যবহার করেন তা বিবেচ্য নয় ===
টিজে ক্রাউডার 22'15

এটি লজ্জাজনক যে jQuery বাস্তবায়িত করেছে :containsযা আরও জটিল, তবে সঠিক পাঠ্য ম্যাচের জন্য কোনও নির্বাচককে কার্যকর করেনি। = {
পাওলো বুয়েনো

54

একটি বর্ধিত ছদ্ম ফাংশন যুক্ত করার চেষ্টা করুন:

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

তারপরে আপনি এটি করতে পারেন:

$('p:textEquals("Hello World")');

2
দুর্দান্ত সমাধান: সামান্য সংযোজন: আপনি কোনও বিদ্যমান এক্সপ্রেটি মুছে ফেলবেন না তা নিশ্চিত করার জন্য, আমি করব:$.expr[':'].textEquals = $.expr[':'].textEquals || $.expr.createPseudo(function(arg) {
মিসচা মলহোয়েক

9

এটি অর্জনের জন্য আপনি jQuery এর ফিল্টার () ফাংশন ব্যবহার করতে পারেন ।

$("p").filter(function() {
// Matches exact string   
return $(this).text() === "Hello World";
}).css("font-weight", "bold");

9

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

বিশেষ করে ...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

এছাড়াও, দ্রষ্টব্য, এই উত্তরটি পাঠ্যের দ্বারা নির্বাচন করা লিঙ্কের সাথে অত্যন্ত মিল (সঠিক মিল)

এবং গৌণ নোট ... অনুসন্ধানের পাঠ্যের আগে এবং পরেtrim কেবল সাদা স্থান সরিয়ে দেয় । এটি শব্দের মাঝখানে সাদা অংশ সরিয়ে দেয় না। আমি বিশ্বাস করি এটি পছন্দসই আচরণ, তবে আপনি চাইলে আপনি এটি পরিবর্তন করতে পারেন।


5

আমি একটি উপায় খুঁজে পেয়েছি যা আমার পক্ষে কাজ করে। এটি ১০০% নির্ভুল নয় তবে এটি এমন সমস্ত স্ট্রিংগুলি সরিয়ে দেয় যেখানে আমি যে শব্দটি খুঁজছি তার চেয়ে বেশি রয়েছে কারণ আমি স্ট্রিংটি পৃথক পৃথক স্থানের অন্তর্ভুক্ত না করে পরীক্ষা করি। যাইহোক আপনার এইগুলির দরকার নেই ""। jQuery জানেন আপনি একটি স্ট্রিং খুঁজছেন। আপনার কেবলমাত্র একটি স্থান রয়েছে তা নিশ্চিত করুন: () অংশটি রয়েছে অন্যথায় এটি কাজ করবে না।

<p>hello</p>
<p>hello world</p>
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');

এবং হ্যাঁ আমি জানি আপনার মতো জিনিস থাকলে এটি কাজ করবে না <p>helloworld</p>


1
ফিল্টার বা এক্সটেনশন ব্যবহার না করে (..) সহ সাধারণ ম্যাচের চতুর ব্যবহার! প্রথমটিতে (..) থাকা জায়গাগুলির জন্য প্রয়োজনীয় কোনও কিছুর উপরে কাজ করবে না, তবে এর জন্য একটি সমাধান নিয়ে আসার চেষ্টা করছি। ধন্যবাদ!
জোপিসি

3

উপরে বর্ণিত টিজে ক্রোডারের মতো, ফিল্টার ফাংশনটি আশ্চর্য করে। এটি আমার নির্দিষ্ট ক্ষেত্রে আমার পক্ষে কাজ করছিল না। আমার একটি ডিভের ভিতরে একাধিক টেবিল এবং তাদের সম্পর্কিত টিডি ট্যাগ অনুসন্ধান করতে হবে (এই ক্ষেত্রে একটি জিকুয়েরি ডায়ালগ)।

$("#MyJqueryDialog table tr td").filter(function () {
    // The following implies that there is some text inside the td tag.
    if ($.trim($(this).text()) == "Hello World!") {
       // Perform specific task.
    }
});

আমি আশা করি এটি কারও পক্ষে সহায়ক!


আমি jquery তে বেশ নতুন, তবে মনে করি ফিল্টার () এর পরিবর্তে প্রতিটি () ব্যবহারের চেয়ে কিছুটা ভাল লাগবে কারণ ফিল্টারটির লক্ষ্য একটি সাবহারিকে ফিরিয়ে দেওয়া। তবে সমাধানটি অবশ্যই স্পষ্টভাবে অনুপ্রেরণা জাগিয়েছে, যেমন আমার একই সমস্যা ছিল :)
জিওপার্ডি টেম্পেস্ট

0

একটি ওয়ান-লাইনার যা জিকুয়েরিতে বিকল্প লাইব্রেরিগুলির সাথে কাজ করে :

$('p').filter((i, p) => $(p).text().trim() === "hello").css('font-weight', 'bold');

এবং এটি কোনও jQuery এর a:contains("pattern")নির্বাচকের সমতুল্য :

var res = $('a').filter((i, a) => $(a).text().match(/pattern/));

-4

প্রথম ফার্স্ট () এখানে সহায়তা করবে

$('p:contains("hello")').first().css('font-weight', 'bold');

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