প্রদত্ত ইনপুটটির সাথে সম্পর্কিত এইচটিএমএল লেবেল সন্ধান করুন

Question

ধরা যাক আমার একটি html ফর্ম রয়েছে have প্রতিটি ইনপুট / সিলেক্ট / টেক্সারিয়া এর সঙ্গীর আইডিতে সেট করা বৈশিষ্ট্যের সাথে <label>মিল রাখে for। এই ক্ষেত্রে, আমি জানি যে প্রতিটি ইনপুটটিতে কেবল একটি একক লেবেল থাকবে।

জাভাস্ক্রিপ্টে একটি ইনপুট উপাদান দেওয়া হয়েছে - একটি অনকিআপ ইভেন্টের মাধ্যমে, উদাহরণস্বরূপ - এটির সাথে সম্পর্কিত লেবেল খুঁজে পাওয়ার সেরা উপায় কী?

Comments

নোট করুন যে কোনও উপাদানের একাধিক লেবেল থাকতে পারে, আমি কয়েকটি অ্যাপ্লিকেশন (একটির জন্য এসএপি) দেখেছি যার উপাদানটিতে একাধিক লেবেল রয়েছে।

— মোটি

function getInputLabel(thisElement) { var theAssociatedLabel,elementID; elementID = thisElement.id; theAssociatedLabel = thisElement.parentNode.querySelector("label[for='" + elementID + "']"); console.log('theAssociatedLabel.htmlFor: ' + theAssociatedLabel.htmlFor); theAssociatedLabel.style.backgroundColor = "green";//Set the label background color to green };

— অ্যালান ওয়েলস

বা সবেমাত্র নোড.প্যারেন্টনোড.কিউরিলেক্টর ("লেবেল [জন্য = '" + নোড.আইড + "']") inner lol

— সলোমন পি বাইর

Answer 1

প্রথমে লেবেলের জন্য পৃষ্ঠাটি স্ক্যান করুন এবং প্রকৃত ফর্ম উপাদান থেকে লেবেলের জন্য একটি রেফারেন্স বরাদ্দ করুন:

var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
         var elem = document.getElementById(labels[i].htmlFor);
         if (elem)
            elem.label = labels[i];         
    }
}

তারপরে, আপনি কেবল যেতে পারেন:

document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';

অনুসন্ধানের অ্যারের প্রয়োজন নেই :)

Comments

আপনি কি ব্যাখ্যা করতে পারেন যেখানে আপনার প্রসারিত সম্পত্তির ব্যবহার খনি থেকে আলাদা? আমি কোনও "অনুসন্ধানের অ্যারে" ব্যবহার করি না, আমি বৈশিষ্ট্যযুক্ত একটি বস্তু ব্যবহার করি। "এলিমেন্ট.এলবেল", "এলিমেন্ট ['লেবেল']" বা "লকআপ ['এলিমেন্টআইডি']" এর মধ্যে কেবল সিনট্যাক্টিকাল পার্থক্য রয়েছে। পর্দার আড়ালে তারা একই জিনিস ।

— তোমালাক

এটি আরও সুন্দর কারণ আমাকে আলাদা আলাদা জিনিস রাখতে হবে না - সম্পর্কটি সরাসরি ইনপুট উপাদানটির সাথে সঞ্চয় করা হয়।

— জোয়েল কোহর্ন

এটি ব্রাউজার দ্বারা পরিচালনা করা উচিত

— Andho

Answer 2

আপনি যদি jQuery ব্যবহার করে থাকেন তবে আপনি এই জাতীয় কিছু করতে পারেন

$('label[for="foo"]').hide ();

আপনি যদি jQuery ব্যবহার না করেন তবে আপনাকে লেবেলটি সন্ধান করতে হবে। এখানে একটি ফাংশন যা উপাদানটিকে একটি আর্গুমেন্ট হিসাবে গ্রহণ করে এবং সম্পর্কিত লেবেলটি দেয়

function findLableForControl(el) {
   var idVal = el.id;
   labels = document.getElementsByTagName('label');
   for( var i = 0; i < labels.length; i++ ) {
      if (labels[i].htmlFor == idVal)
           return labels[i];
   }
}

Answer 3

এইচটিএমএল 5 স্ট্যান্ডার্ডে এমন একটি labelsসম্পত্তি রয়েছে যা লেবেলগুলিকে নির্দেশ করে যা কোনও ইনপুট উপাদানটির সাথে সম্পর্কিত।

সুতরাং আপনি এর মতো কিছু ব্যবহার করতে পারেন ( labelsব্রাউজার সমর্থন না করে এমন ক্ষেত্রে লেবেল পুনরুদ্ধারের ক্ষেত্রে নেটিভ প্রোপার্টিটির জন্য সমর্থন তবে ফ্যালব্যাক সহ) ...

var getLabelsForInputElement = function(element) {
    var labels = [];
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && Array.prototype.push
        .apply(labels, document.querySelector("label[for='" + id + "']"));

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.push(element);
        }  
    }

    return labels;
};

// ES6
var getLabelsForInputElement = (element) => {
    let labels;
    let id = element.id;

    if (element.labels) {
        return element.labels;
    }

    if (id) {
        labels = Array.from(document.querySelector(`label[for='${id}']`)));
    }

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.push(element);
        }  
    }

    return labels;
};

এমনকি আপনি যদি jQuery ব্যবহার করেন তবে আরও সহজ ...

var getLabelsForInputElement = function(element) {
    var labels = $();
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && (labels = $("label[for='" + id  + "']")));

    labels = labels.add($(element).parents("label"));

    return labels;
};

Comments

কেবল ক্রোমে নয়, এটি এইচটিএমএল 5 স্ট্যান্ডার্ডে রয়েছে ।

— বার্গি

এটি waaaay আপ করা উচিত। ধন্যবাদ!

— maxhm10

Answer 4

আমি কিছুটা অবাক হয়ে গিয়েছি যে কেউ জেনেও দেখে মনে হয় না যে আপনি নিখুঁতভাবে করার অনুমতি দিয়েছেন:

<label>Put your stuff here: <input value="Stuff"></label>

যা প্রস্তাবিত উত্তরের মাধ্যমে কোনওটিই গ্রহণ করবে না, তবে সঠিকভাবে ইনপুটটিকে লেবেল করবে ।

এখানে কিছু কোড রয়েছে যা এই কেসটিকে আমলে নেয়:

$.fn.getLabels = function() {
    return this.map(function() {
        var labels = $(this).parents('label');
        if (this.id) {
            labels.add('label[for="' + this.id + '"]');
        }
        return labels.get();
    });
};

ব্যবহার:

$('#myfancyinput').getLabels();

কিছু নোট:

• কোডটি পারফরম্যান্সের জন্য নয়, স্পষ্টতার জন্য লেখা হয়েছিল। আরও পারফরম্যান্ট বিকল্প উপলব্ধ হতে পারে।
• এই কোডটি একসাথে একাধিক আইটেমের লেবেল প্রাপ্তিকে সমর্থন করে। যদি আপনি যা চান তা না হলে প্রয়োজনীয় হিসাবে খাপ খাইয়ে নিন।
• এটি এখনও এমন বিষয়গুলির যত্ন নেয় না aria-labelledbyযে আপনি যদি এটি ব্যবহার করেন (পাঠকের কাছে অনুশীলন হিসাবে ছেড়ে দেওয়া)।
• বিভিন্ন ব্যবহারকারী এজেন্ট এবং সহায়ক প্রযুক্তিগুলিতে সমর্থন করার ক্ষেত্রে একাধিক লেবেল ব্যবহার করা একটি জটিল ব্যবসা, সুতরাং ভাল পরীক্ষা করুন এবং নিজের ঝুঁকিতে ব্যবহার করুন ইত্যাদি etc.
• হ্যাঁ, আপনি jQuery ব্যবহার না করে এটিও বাস্তবায়ন করতে পারেন। :-)

Comments

অনুমান করার বিপরীতে কেউ যদি অন্তর্নিহিত লেবেল সংঘটন নিয়ে আসে দেখে ভাল লাগছে forযে labelউপাদানটির সর্বদা কোনও বৈশিষ্ট্য থাকবে ।

— জোশ হাবদাস

Answer 5

এর আগে ...

var labels = document.getElementsByTagName("LABEL"),
    lookup = {},
    i, label;

for (i = 0; i < labels.length; i++) {
    label = labels[i];
    if (document.getElementById(label.htmlFor)) {
        lookup[label.htmlFor] = label;
    }
}

পরবর্তীতে ...

var myLabel = lookup[myInput.id];

স্নারকি মন্তব্য: হ্যাঁ, আপনি এটি জিকুয়ারি দিয়েও করতে পারেন। :-)

Comments

খুশী হলাম। আমি রিফ্যাক্টর করব যে কেবলমাত্র সামান্য যাতে এটি প্রথমবারের মতো পদ্ধতিটি কল করার সময় অনুসন্ধানটি তৈরি করে তবে এটি কৌশলটি করা উচিত।

— জোয়েল কোহোর্ন

আমি বুঝিয়েছি যে আপনি একবারে চেহারাটি তৈরি করবেন।

— তোমালাক

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

— টমলাক

উপরের কোনও লুক অ্যারে ছাড়াই এটি করার একটি উপায় পেয়েছি।

— ফ্লাইওয়াত

আমি অর্থ দিয়েছিলাম অভ্যন্তরীণ কোডটি পদ্ধতির অভ্যন্তরে সরিয়ে

— ফেলুন

Answer 6

document.querySelector ("লেবেল [for =" + vHtmlInputElement.id + "]"));

এটি প্রশ্নের সহজ উত্তর এবং হীন পদ্ধতিতে উত্তর দেয়। এটি ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে এবং সমস্ত মূল-প্রবাহের যথাযথ ব্রাউজারগুলিতে কাজ করে।

Comments

এটি প্রশ্নের উত্তর দেয় না। আপনার যথেষ্ট খ্যাতি অর্জনের পরে আপনি কোনও পোস্টে মন্তব্য করতে সক্ষম হবেন ; পরিবর্তে, এমন উত্তরগুলি সরবরাহ করুন যা জিজ্ঞাসাকারীর কাছ থেকে স্পষ্টতার প্রয়োজন হয় না । - পর্যালোচনা থেকে

— loki

এটি স্পষ্টতই @ লোকি প্রশ্নের উত্তর সরবরাহ করে কারণ এর আর কোনও ব্যাখ্যা নেই, এর অর্থ এই নয় যে এটি ভুল বা এর উত্তর দেওয়ার চেষ্টা করেনি।

— geisterfurz007

সবচেয়ে সহজ এবং দরকারী উত্তর! ধন্যবাদ!

— iedmrc

Answer 7

jquery সঙ্গে আপনি যেমন কিছু করতে পারে

var nameOfLabel = someInput.attr('id');
var label = $("label[for='" + nameOfLabel + "']");

Comments

পূর্বপুরুষ হলেও সম্ভাব্য লেবেলগুলি মিস করে।

— অ্যালেক্স

Answer 8

আপনি যদি ক্যোয়ারী নির্বাচন করতে ইচ্ছুক হন (এবং আপনি এমনকি এবং কখনও কখনও পারেন!), অন্য একটি পদ্ধতি কার্যকর হতে পারে।

যদি আপনার ফর্ম ক্ষেত্রে একটি আইডি থাকে এবং আপনি লেবেলের forবৈশিষ্ট্যটি ব্যবহার করেন তবে এটি আধুনিক জাভাস্ক্রিপ্টে বেশ সহজ হয়ে ওঠে:

var form = document.querySelector('.sample-form');
var formFields = form.querySelectorAll('.form-field');

[].forEach.call(formFields, function (formField) {
    var inputId = formField.id;
    var label = form.querySelector('label[for=' + inputId + ']');
    console.log(label.textContent);
});

কেউ কেউ একাধিক লেবেল সম্পর্কে উল্লেখ করেছেন; যদি তারা সমস্ত forবৈশিষ্ট্যের জন্য একই মান ব্যবহার করে তবে কেবলমাত্র querySelectorAllপরিবর্তে ব্যবহার করুন querySelectorএবং আপনার প্রয়োজনীয় সমস্ত কিছু লুপ করুন।

Answer 9

অন্য সমস্ত উত্তর অত্যন্ত পুরানো !!

আপনাকে যা করতে হবে তা হ'ল:

input.labels

এইচটিএমএল 5 ইতিমধ্যে বহু বছর ধরে সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত। একেবারে কোনও কারণ নেই যে আপনার নিজেরাই স্ক্র্যাচ থেকে এটি তৈরি করতে হবে বা এটি পলিফিল করতে হবে! আক্ষরিকভাবে কেবল ব্যবহার করুন input.labelsএবং এটি আপনার সমস্ত সমস্যার সমাধান করে।

Comments

এই পৃষ্ঠা অনুসারে , input.labelsআইই বা এজ দ্বারা সমর্থিত নয় এবং ফায়ারফক্স কেবলমাত্র সমর্থন যোগ করেছে।

— এন্টি 29

@ Antti29 আপনি একটি shim ব্যবহার কার্যকারিতা যোগ করতে পারেন: github.com/termi/ES5-DOM-SHIM আপনি বৈশিষ্ট্য দেখতে পারেন এখানে যোগ করা হচ্ছে: github.com/termi/ES5-DOM-SHIM/blob/...

— ADJenks

Answer 10

$("label[for='inputId']").text()

এটি আমাকে তার আইডি ব্যবহার করে একটি ইনপুট উপাদানটির লেবেল পেতে সহায়তা করেছে।

Answer 11

গিজের কাছ থেকে উত্তর আমার পক্ষে সবচেয়ে মূল্যবান ছিল, তবে দুর্ভাগ্যক্রমে সম্প্রসারণটি কার্যকর হয় না।

এখানে পুনর্লিখনের এক্সটেনশান যা কাজ করে, এটি কারও সাহায্য করতে পারে:

jQuery.fn.getLabels = function () {
    return this.map(function () {
        var parentLabels = $(this).parents('label').get();
        var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
        return parentLabels.concat(associatedLabels);
    });
};

Answer 12

ES6 বৈশিষ্ট্য ব্যবহার করে সত্যই সংক্ষিপ্ত সমাধান, যেমন এটি উইন্ডোজ ও লাইনারে পরিণত করার জন্য ডেস্ট্রাকচারিং এবং ইনপিলিট রিটার্নগুলি হ'ল:

const getLabels = ({ labels, id }) => labels || document.querySelectorAll(`label[for=${id}]`)

অথবা কেবল একটি নোডলিস্ট নয়, একটি লেবেল পেতে:

const getFirstLabel = ({ labels, id }) => labels && labels[0] || document.querySelector(`label[for=${id}]`)

Answer 13

ফর্মটিতে নিজেই লেবেলে একটি আইডি যুক্ত করা খুব সহজ example

<label for="firstName" id="firstNameLabel">FirstName:</label>

<input type="text" id="firstName" name="firstName" class="input_Field" 
       pattern="^[a-zA-Z\s\-]{2,25}$" maxlength="25"
       title="Alphabetic, Space, Dash Only, 2-25 Characters Long" 
       autocomplete="on" required
/>

তারপরে, আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন:

if (myvariableforpagelang == 'es') {
   // set field label to spanish
   document.getElementById("firstNameLabel").innerHTML = "Primer Nombre:";
   // set field tooltip (title to spanish
   document.getElementById("firstName").title = "Alfabética, espacio, guión Sólo, 2-25 caracteres de longitud";
}

জাভাস্ক্রিপ্ট কাজ করতে একটি বডি অনলোড ফাংশনে থাকতে হবে।

শুধু একটি চিন্তা, আমার জন্য সুন্দর কাজ করে।

Answer 14

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

যেহেতু কেউ জিকুয়ারি-মুক্ত উত্তর পোস্ট করেনি, তাই এখানে আমার:

var labels = form.getElementsByTagName ('label');
var input_label = {};
for (var i = 0 ; i != labels.length ; i++)
{
    var label = labels[i];
    var input = label.htmlFor
              ? document.getElementById(label.htmlFor)
              : label.getElementsByTagName('input')[0];
    input_label[input.outerHTML] = 
        (label.innerText || label.textContent); // innerText for IE8-
}

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

আপনি একবারে একাধিক ফর্মের জন্য লেবেল পেতে চাইলে বেস উপাদান হিসাবে একটি ফর্ম বা পুরো নথি ব্যবহার করতে পারেন।

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

আপনি লেবেল পাঠ্যগুলি ট্রিম করতে চাইতে পারেন, যেহেতু লেবেলে ইনপুট এম্বেড করা হয় তখন পিছনের স্থানগুলি প্রায়শই উপস্থিত থাকে।

Answer 15

সেরা উত্তরটি পুরোপুরি সূক্ষ্মভাবে কাজ করে তবে বেশিরভাগ ক্ষেত্রে এটি সমস্ত labelউপাদানগুলির মধ্যে লুপ করা ওভারকিল এবং অদক্ষ ।

উপাদানটির labelসাথে এটি কার্যকর করার জন্য এখানে একটি কার্যকর কার্যকারিতা রয়েছে input:

function getLabelForInput(id)
{
    var el = document.getElementById(id);
    if (!el)
        return null;
    var elPrev = el.previousElementSibling;
    var elNext = el.nextElementSibling;
    while (elPrev || elNext)
    {
        if (elPrev)
        {
            if (elPrev.htmlFor === id)
                return elPrev;
            elPrev = elPrev.previousElementSibling;
        }
        if (elNext)
        {
            if (elNext.htmlFor === id)
                return elNext;
            elNext = elNext.nextElementSibling;
        }
    }
    return null;
}

আমার জন্য, কোডের এই এক লাইনটি যথেষ্ট ছিল:

el = document.getElementById(id).previousElementSibling;

বেশিরভাগ ক্ষেত্রে, ইনপুটটির labelখুব কাছাকাছি বা পাশে থাকবে, যার অর্থ উপরের ফাংশনটির লুপটির জন্য খুব অল্প সংখ্যক বার পুনরাবৃত্তি করা দরকার।

Answer 16

আপনি কি ডকুমেন্ট.জেট এলিমেন্টবিআইডি ('আইডি') ব্যবহার করার চেষ্টা করেছেন যেখানে আইডি লেবেলের আইডি বা এমন পরিস্থিতি যা আপনি জানেন না যে আপনি কোনটিকে অনুসন্ধান করছেন

Comments

আমি ইনপুট উপাদানটির আইডি জানি, তবে লেবেলের আইডিটি জানি না।

— জোয়েল কোহোর্ন

আপনি কি ইনপুট আইডি = 'পরীক্ষা' এবং লেবেল আইডি = 'lbl_test "হিসাবে লেবেলটির জন্য কোনও সম্পর্কিত আইডি সেট করতে পারবেন না

— জোশ মেইন

Answer 17

একটি জিকিউরি নির্বাচক ব্যবহার করুন:

$("label[for="+inputElement.id+"]")

Answer 18

ভবিষ্যতের সন্ধানকারীদের জন্য ... নিম্নলিখিতটি ফ্লাইওয়াতের গৃহীত উত্তরের একটি jQuery-ified সংস্করণ:

var labels = $("label");
for (var i = 0; i < labels.length; i++) {
    var fieldId = labels[i].htmlFor;
    if (fieldId != "") {
        var elem = $("#" + fieldId);
        if (elem.length != 0) {
            elem.data("label", $(labels[i]));   
        }
    }
}

ব্যবহার:

$("#myFormElemId").data("label").css("border","3px solid red");

Comments

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

— জোয়েল কোহোর্ন

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

— অবজেক্ট টাইপ

এটি খুব jQuery-ified নয় । forলুপ কেন each()? এর htmlForবদলে কেন attr("for")?

— অ্যালেক্স

দৃষ্টিকোণ উপর নির্ভর করে, আমি অনুমান। গ্রাহকটি অভ্যন্তরীণ নয়, jQuery-ified ছিল।

— অবজেক্টটাইপ

Answer 19

আমি জানি এটি পুরানো, তবে কিছু সমাধানে আমার সমস্যা হয়েছিল এবং এটি একসাথে ছুঁড়ে ফেলা হয়েছিল। আমি এটি উইন্ডোজ (ক্রোম, ফায়ারফক্স এবং এমএসআইই) এবং ওএস এক্স (ক্রোম এবং সাফারি) এ পরীক্ষা করেছি এবং বিশ্বাস করি এটিই সহজ সমাধান। এটি একটি লেবেল সংযুক্ত করার এই তিনটি শৈলীর সাথে কাজ করে।

<label><input type="checkbox" class="c123" id="cb1" name="item1">item1</label>

<input type="checkbox" class="c123" id="cb2" name="item2">item2</input>

<input type="checkbox" class="c123" id="cb3" name="item3"><label for="cb3">item3</label>

JQuery ব্যবহার:

$(".c123").click(function() {
    $cb = $(this);
    $lb = $(this).parent();
    alert( $cb.attr('id') + ' = ' + $lb.text() );
});

আমার জেএসফিডাল: http://jsfiddle.net/pnosko/6PQCw/

Comments

এটি আসলে কাজ করছে না - এটি কেবলমাত্র মূল উপাদানটির পাঠ্যটি ফিরিয়ে দিচ্ছে, যা কখনও কখনও আপনি চান এমন পাঠ্য হয়ে থাকে।

— জন হাস্কল

Answer 20

আমি আমার নিজের প্রয়োজনের জন্য তৈরি করেছি, কারও পক্ষে উপকারী হতে পারে: জেএসএফআইডিডিএল

$("input").each(function () {
    if ($.trim($(this).prev('label').text()) != "") {
        console.log("\nprev>children:");
        console.log($.trim($(this).prev('label').text()));
    } else {
        if ($.trim($(this).parent('label').text()) != "") {
            console.log("\nparent>children:");
            console.log($.trim($(this).parent('label').text()));
        } else {
            if ($.trim($(this).parent().prev('label').text()) != "") {
                console.log("\nparent>prev>children:");
                console.log($.trim($(this).parent().prev('label').text()));
            } else {
                console.log("NOTFOUND! So set your own condition now");
            }
        }
    }
});

Answer 21

আমি কিছুটা অবাক হয়েছি যে কেউ সিএসএস সম্পর্ক পদ্ধতি ব্যবহার করার পরামর্শ দিচ্ছে না?

স্টাইল শীটে আপনি উপাদান নির্বাচকের কাছ থেকে একটি লেবেল উল্লেখ করতে পারেন:

<style>

//for input element with class 'YYY'
input.YYY + label {}

</style>

যদি চেকবাক্সটিতে 'XXX' এর একটি আইডি থাকে তবে লেবেলটি jQuery এর মাধ্যমে পাওয়া যাবে:

$('#XXX + label');

আপনি jQuery চেকবক্স উপাদান থেকে লেবেলটি ফেরত দিতে .ফাইন্ড ('+ লেবেল') প্রয়োগ করতে পারেন, যেমন লুপিংয়ের সময় দরকারী:

$('input[type=checkbox]').each( function(){
   $(this).find('+ label');
});

Comments

ওফস, আমার নোট করা উচিত যে এটি উপাদানটির পরে সরাসরি আসার লেবেলের উপর নির্ভর করে।

— গর্ডন রাউস