পৃথক শ্রেণীর নামের উপর নির্বাচক 'দিয়ে শুরু' ব্যবহার করে

Question

আমার যদি নিম্নলিখিত থাকে:

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

আমি প্রথম দুটি ডিআইভি খুঁজে পেতে নিম্নলিখিত নির্বাচকটি ব্যবহার করতে পারি:

$("div[class^='apple-']")

তবে, আমার যদি এটি থাকে:

<div class="some-other-class apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

এটি কেবলমাত্র দ্বিতীয় ডিআইভি খুঁজে পাবে, যেহেতু প্রথম ডিভের ক্লাসটি স্ট্রিং হিসাবে ফিরে এসেছে (আমার মনে হয়) এবং আসলে 'অ্যাপল' দিয়ে শুরু হয় না বরং 'কিছু-'

এর চারপাশের এক উপায়টি ব্যবহার না করা থেকে শুরু হয়, তবে এর পরিবর্তে রয়েছে:

$("div[class*='apple-']")

সমস্যাটি হ'ল এটি আমার উদাহরণে 3 য় ডিআইভিও নির্বাচন করবে।

প্রশ্ন: jQuery এর মাধ্যমে, স্ট্রিং হিসাবে পুরো শ্রেণীর গুণাবলীর পরিবর্তে পৃথক শ্রেণীর নামের উপর প্রাকটিকেট নির্বাচকদের ব্যবহারের সঠিক উপায় কী? এটি কি কেবল CLASS দখল করার বিষয়, তারপরে এটিকে একটি অ্যারেতে বিভক্ত করা এবং তারপরে প্রতিটি রেজিেক্সের সাথে পৃথক করে লুপিং করার বিষয়? বা আরও মার্জিত / কম ভার্বোস সমাধান আছে?

Answer 1

"আপেল-" প্লাস দিয়ে শুরু হওয়া ক্লাসগুলিতে "আপেল" রয়েছে

$("div[class^='apple-'],div[class*=' apple-']")

Comments

+1 টি। যদিও আমি @পায়ারোটসের এই পরামর্শের সাথে একমত যে "আপেল" এখানে নিজস্ব শ্রেণি হওয়া উচিত, যেহেতু এটি স্পষ্টতই একাধিক ডিভগুলিকে ওভারল্যাপ করে এখনও একটি স্বতন্ত্র সত্তা। তবে এটি সমস্যার সমাধান করে।

— jvenema

হুম ... চালাক! আমি সেখানে জায়গা ব্যবহার করার কথা ভাবিনি। কেউ কি জেকারি সিলেক্টারে বুলিয়ান অপারেটর ব্যবহার করতে পারেন? আদর্শভাবে, উপরেরটি 'ও' হতে পারে (বিরল এবং সম্ভবত এড়ানো সম্ভব নয়) ক্ষেত্রে 'আপেল'

— ডিএ

নিশ্চিত যে আমি বুঝতে পেরেছি না, তবে প্রথম নির্বাচক শূন্য উপাদান ফেরত দেওয়ার সময় আপনি যদি কেবল দ্বিতীয় নির্বাচক ব্যবহার করতে চান তবে আপনি এই জাতীয় কিছু করতে পারেন: var divs = $("div[class^='apple-']"); if(divs.length == 0) divs = $("div[class*=' apple-']");

— জোশ স্টোডোলা

এখন যে আমি এটি সম্পর্কে চিন্তা করি, আপনার প্রাথমিক সমাধানটি ঠিক কাজ করে fine একটি ডিআইভির "আপেল-ইটের আপেল-ঘোড়া" এর মতো শ্রেণি ছিল এখনও jQuery অবজেক্টে কেবল একবার নির্বাচিত হবে।

— ডিএ

বিভাগের পরিবর্তে *

— ডিভের

Answer 2

আমি "আপেল" এর নিজস্ব বর্গ তৈরি করার পরামর্শ দেব। আপনার প্রারম্ভিক / শেষ-সহ এড়ানো উচিত যদি আপনি এটি করতে পারেন কারণ ব্যবহার করে নির্বাচন করতে সক্ষম হওয়া আরও div.appleদ্রুত হবে। এটি আরও মার্জিত সমাধান। যদি কাজটি সহজ / দ্রুততর করে তোলে তবে বিষয়গুলিকে পৃথক শ্রেণিতে বিভক্ত করতে ভয় পাবেন না।

Comments

আপনি কীভাবে এটি খুব দ্রুত হবে চিত্র? এটি এখনও পুরো ডিওএম স্ক্যান করতে এবং শ্রেণীর বৈশিষ্ট্য মূল্যায়ন করতে হবে। এটি প্রান্তিকভাবে দ্রুত (সর্বোত্তম) হবে কারণ এটির জন্য শ্রেণীর বৈশিষ্ট্যটি সাবস্ট্রিং করতে হবে না। তুচ্ছ।

— জোশ স্টোডোলা

componenthouse.com/article-19 : আপনি যদি ক্লাস বিভাগে অংশটি দেখুন তবে নিয়মিত বিন্দু বাক্য গঠনটি বর্গ হিসাবে একটি গুণ হিসাবে বিবেচনা করার চেয়ে সাধারণত একটি শালীন বিট দ্রুত হয়। সাবস্ট্রিং অনুসন্ধান অনুসন্ধান করুন (এবং একাধিক শ্রেণীর নাম সহ উপাদানগুলি ছড়িয়ে দিতে তাকে অতিরিক্ত কাজ করতে হবে) এবং এটি একটি সুনির্দিষ্ট কর্মক্ষমতা সঞ্চয় যোগ করবে।

— তোতারা

আমি রাজী. ক্যাচটি হ'ল আমরা এখনও আইআই 6 কে প্রচুর সমর্থন করছি এবং এটি সিএসএসে যৌগিক নির্বাচকদের সমর্থন করে না: .class1.class2.class3, আমরা দীর্ঘ ক্লাসের নাম ব্যবহারের উপর নির্ভর করছি যেখানে 'প্যারামিটার' ড্যাশ দ্বারা বিভক্ত করা হয়।

— ডিএ

Answer 3

এটি উপসর্গের সাথে রয়েছে

$("div[class^='apple-']")

এটি শুরু করার জন্য তাই আপনার সেখানে '-' চর থাকার দরকার নেই

$("div[class|='apple']")

আপনি এখানে jQuery সিলেক্টরের অন্যান্য দুর্দান্ত বৈচিত্রের গুচ্ছটি পেতে পারেন https://api.jquery.com/category/selectors/

Answer 4

যদিও এখানে শীর্ষস্থানীয় উত্তরটি প্রশ্নকারীর নির্দিষ্ট ক্ষেত্রে কার্যকর নয়, আপনি যদি পৃথক শ্রেণীর নামগুলিতে 'দিয়ে শুরু' ব্যবহারের সমাধান খুঁজছেন:

আপনি এই কাস্টম jQuery নির্বাচকটি ব্যবহার করতে পারেন, যা আমি :acp()"একটি শ্রেণির উপসর্গ" এর জন্য কল করি । কোডটি এই পোস্টের নীচে রয়েছে।

var test = $('div:acp("starting_text")');

এটি <div>শ্রেণিটির শুরুতে বা অন্য কোথাও শ্রেণি বৈশিষ্ট্যযুক্ত স্ট্রিংয়ের অন্তর্ভুক্ত কিনা তা বিবেচনা না করে প্রদত্ত স্ট্রিং ("উদাহরণস্বরূপ" উদাহরণস্বরূপ) দিয়ে শুরু হওয়া কমপক্ষে একটি শ্রেণীর নাম রয়েছে এমন যে কোনও এবং সমস্ত উপাদান নির্বাচন করবে ।

<div id="1" class="apple orange lemon" />
<div id="2" class="orange applelemon banana" />
<div id="3" class="orange lemon apple" />
<div id="4" class="lemon orangeapple" />
<div id="5" class="lemon orange" />

var startsWithapp = $('div:acp("app")');

এই উপাদান 1, 2, এবং 3 কিন্তু ফিরে আসবে না 4 বা 5।

এখানে :acpকাস্টম সিলেক্টরের জন্য ঘোষণা , যা আপনি যে কোনও জায়গায় রাখতে পারেন:

$(function(){
    $.expr[":"].acp = function(elem, index, m){
          var regString = '\\b' + m[3];
          var reg = new RegExp(regString, "g");
          return elem.className.match(reg);
    }
});

আমি এটি তৈরি করেছি কারণ আমি যে ওয়েবসাইটগুলিতে আমার কোনও ব্যাকএন্ড নিয়ন্ত্রণ নেই তার প্রচুর গ্রিজমোনকি হ্যাকিং করি, তাই প্রায়শই আমার প্রায়শই ডায়ামিক প্রত্যয়যুক্ত শ্রেণীর নামযুক্ত উপাদানগুলি সন্ধান করা প্রয়োজন। এটা খুব দরকারী হয়েছে।

Answer 5

এটা চেষ্টা কর:

$("div[class]").filter(function() {
    var classNames = this.className.split(/\s+/);
    for (var i=0; i<classNames.length; ++i) {
        if (classNames[i].substr(0, 6) === "apple-") {
            return true;
        }
    }
    return false;
})

Answer 6

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

এক্ষেত্রে প্রশ্ন হিসাবে জোশ স্টোডোলা উত্তর সঠিক "ক্লাব" অ্যাপল- এর সাথে শুরু হওয়া ক্লাসগুলি "অ্যাপল-" রয়েছে এমন ক্লাসগুলি

$("div[class^='apple-'],div[class*=' apple-']")

তবে যদি উপাদানটির একাধিক ক্লাস থাকে

<div class="some-class apple-monkey"></div>
<div class="some-class apple-horse"></div>
<div class="some-class cow-apple-brick"></div>

তারপরে জোশ স্টোডোলার সমাধানটি কাজ করবে না এর
জন্য এই জাতীয় কিছু করতে হবে

$('.some-parent-class div').filter(function () {
  return this.className.match(/\bapple-/);// this is for start with
  //return this.className.match(/apple-/g);// this is for contain selector
}).css("color","red");

এটি অন্য কারও ধন্যবাদ সাহায্য করতে পারে

Answer 7

যদি কোনও উপাদানের "[শ্রেনী ^ = 'আপেল-']" একাধিক শ্রেণি থাকে তবে কাজ করে না, যেমন

<div class="fruits apple-monkey"></div>

Comments

ওপি প্রশ্নে এটি উল্লেখ করে।

— গুজ