jQuery
डोम हेरफेर

DOM तत्वों का निर्माण

jQuery फ़ंक्शन (आमतौर पर $ रूप में उपनाम) दोनों तत्वों का चयन करने और नए तत्व बनाने के लिए उपयोग किया जा सकता है।

var myLink = $('<a href="http://stackexchange.com"></a>');

आप वैकल्पिक रूप से तत्व विशेषताओं के साथ दूसरा तर्क पारित कर सकते हैं:

var myLink = $('<a>', { 'href': 'http://stackexchange.com' });

'<a>' -> पहला तर्क उस DOM तत्व को निर्दिष्ट करता है जिसे आप बनाना चाहते हैं। इस उदाहरण में यह एक एंकर है लेकिन इस सूची में कुछ भी हो सकता है। a तत्व के संदर्भ के लिए विनिर्देश देखें।

{ 'href': 'http://stackexchange.com' } -> दूसरा तर्क एक जावास्क्रिप्ट ऑब्जेक्ट है, जिसमें विशेषता नाम / मान जोड़े हैं।

'नाम': 'मान' जोड़े पहले तर्क के < > के बीच दिखाई देंगे, उदाहरण के लिए <a name:value> जो हमारे उदाहरण के लिए <a href="http://stackexchange.com"></a> होगा <a href="http://stackexchange.com"></a>

तत्व वर्गों में हेरफेर

पृष्ठ को मानते हुए एक HTML तत्व शामिल है:

<p class="small-paragraph">
  This is a small <a href="https://en.wikipedia.org/wiki/Paragraph">paragraph</a>
  with a <a class="trusted" href="http://stackexchange.com">link</a> inside.
</p>

jQuery डोम कक्षाओं में हेरफेर करने के लिए उपयोगी कार्य प्रदान करता है, सबसे विशेष रूप से hasClass() addClass() , removeClass() , removeClass() और toggleClass() । ये फ़ंक्शन सीधे मिलान किए गए तत्वों की class विशेषता को संशोधित करते हैं।

$('p').hasClass('small-paragraph'); // true
$('p').hasClass('large-paragraph'); // false

// Add a class to all links within paragraphs
$('p a').addClass('untrusted-link-in-paragraph');

// Remove the class from a.trusted
$('a.trusted.untrusted-link-in-paragraph')
.removeClass('untrusted-link-in-paragraph')
.addClass('trusted-link-in-paragraph');

एक वर्ग टॉगल करें

उदाहरण मार्कअप को देखते हुए, हम अपने पहले .toggleClass() साथ एक वर्ग जोड़ सकते हैं:

$(".small-paragraph").toggleClass("pretty");

अब यह true होगा: $(".small-paragraph").hasClass("pretty")

toggleClass कम कोड के साथ एक ही प्रभाव प्रदान करता है:

if($(".small-paragraph").hasClass("pretty")){
   $(".small-paragraph").removeClass("pretty");}
else {
   $(".small-paragraph").addClass("pretty"); }

दो वर्गों को टॉगल करें:

$(".small-paragraph").toggleClass("pretty cool");

कक्षाओं को जोड़ने / हटाने के लिए बूलियन:

$(".small-paragraph").toggleClass("pretty",true); //cannot be truthy/falsey

$(".small-paragraph").toggleClass("pretty",false);

क्लास टॉगल के लिए फ़ंक्शन (किसी समस्या से बचने के लिए आगे का उदाहरण देखें)

$( "div.surface" ).toggleClass(function() {
  if ( $( this ).parent().is( ".water" ) ) {
    return "wet";
  } else {
    return "dry";
  }
});

उदाहरण में प्रयुक्त:

// functions to use in examples
function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
function isOdd(num) { return num % 2;}
var showClass = true; //we want to add the class

उदाहरण:

विषम / सम कक्षाओं को टॉगल करने के लिए तत्व सूचकांक का उपयोग करें

$( "div.gridrow" ).toggleClass(function(index,oldClasses, false), showClass ) {
  showClass
  if ( isOdd(index) ) {
    return "wet";
  } else {
    return "dry";
  }
});

अधिक जटिल toggleClass उदाहरण, एक साधारण ग्रिड मार्कअप दिया गया

<div class="grid">
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow gridfooter">row but I am footer!</div>
</div>

हमारे उदाहरणों के लिए सरल कार्य:

function isOdd(num) {
  return num % 2;
}

function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
var showClass = true; //we want to add the class

gridrow क्लास वाले तत्वों के लिए विषम / सम वर्ग जोड़ें

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  if (isOdd(index)) {
    return "odd";
  } else {
    return "even";
  }
  return oldClasses;
}, showClass);

यदि पंक्ति में gridfooter वर्ग है, तो विषम / समान कक्षाओं को हटा दें, बाकी को रखें।

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (isFooter) {
    oldClasses = oldClasses.replace('even', ' ').replace('odd', ' ');
    $(this).toggleClass("even odd", false);
  }
  return oldClasses;
}, showClass);

जो कक्षाएं लौटती हैं, वे प्रभावित होती हैं। यहां, यदि किसी तत्व में gridfooter नहीं है, तो सम / विषम के लिए एक वर्ग जोड़ें। यह उदाहरण OLD वर्ग सूची की वापसी दिखाता है। यदि यह else return oldClasses; को हटा दिया जाता है, केवल नई कक्षाओं को जोड़ा जाता है, इस प्रकार एक gridfooter वर्ग वाली पंक्ति को हटा दिया जाएगा, हमने उन पुराने को वापस नहीं किया है - उन्हें अन्यथा हटा दिया गया होगा।

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (!isFooter) {
    if (isOdd(index)) {
      return "oddLight";
    } else {
      return "evenLight";
    }
  } else return oldClasses;
}, showClass);

अन्य एपीआई तरीके

jQuery डोम हेरफेर के लिए इस्तेमाल किया जा सकता है कि तरीकों की एक किस्म प्रदान करता है।

पहला .empty () तरीका है।

निम्नलिखित मार्कअप की कल्पना करें:

<div id="content">
  <div>Some text</div>
</div>

$('#content').empty(); कहकर $('#content').empty(); , आंतरिक div को हटा दिया जाएगा। यह $('#content').html(''); का उपयोग करके भी प्राप्त किया जा सकता है $('#content').html(''); ।

एक और आसान कार्य है .closest () फ़ंक्शन:

<tr id="row_1">
  <td><button type="button" class="delete">Delete</button>
</tr>

यदि आप किसी पंक्ति में से किसी एक बटन को क्लिक करना चाहते हैं, जिसे आप पंक्ति कक्षों में से किसी एक पर क्लिक करते हैं, तो आप ऐसा कर सकते हैं:

$('.delete').click(function() {
  $(this).closest('tr');
});

चूँकि संभवतः कई पंक्तियाँ होंगी, प्रत्येक अपने स्वयं के delete बटन के साथ, हम उस बटन पर स्कोप को सीमित करने के लिए .click () फ़ंक्शन के भीतर $(this) उपयोग करते हैं।

यदि आप उस Delete बटन वाली पंक्ति की id प्राप्त करना चाहते हैं जिसे आपने क्लिक किया है, तो आप ऐसा कुछ कर सकते हैं:

$('.delete').click(function() {
  var $row = $(this).closest('tr');
  var id = $row.attr('id');
});

यह आमतौर पर एक $ (डॉलर चिह्न) के साथ jQuery वस्तुओं युक्त उपसर्ग चर को अच्छा अभ्यास माना जाता है ताकि यह स्पष्ट हो सके कि चर क्या है।

.closest() .parents () विधि का एक विकल्प है:

$('.delete').click(function() {
  var $row = $(this).parents('tr');
  var id = $row.attr('id');
});

और .परेंट () फ़ंक्शन भी है:

$('.delete').click(function() {
  var $row = $(this).parent().parent();
  var id = $row.attr('id');
});

.parent() केवल DOM ट्री के एक स्तर तक जाता है, इसलिए यह काफी अनम्य है, यदि आप डिलीट बटन को उदाहरण के लिए एक span भीतर समाहित करने के लिए बदलते हैं, तो jQuery चयनकर्ता टूट जाएगा।

.html ()

आप इस विधि का उपयोग चयनकर्ता के भीतर सभी HTML को बदलने के लिए कर सकते हैं। मान लें कि आपके पास इस तरह एक html तत्व है

<div class="row">
    <div class="col-md-12">
        <div id="information">
            <p>Old message</p>
        </div>
    </div>
</div>

आप .html() उपयोग कर सकते हैं। सभी एक पंक्ति के साथ उपयोगकर्ताओं को सचेत करने के लिए एक चेतावनी या सूचनात्मक पाठ हटाने और जोड़ने के लिए।

$("#information").html("<p>This is the new alert!</p>");

तत्वों की छंटाई

तत्वों को कुशलतापूर्वक क्रमबद्ध करने के लिए (सभी एक बार और न्यूनतम डोम रुकावट के साथ), हमें निम्न करने की आवश्यकता है:

1. तत्वों का पता लगाएं
2. एक सेट की स्थिति के आधार पर छाँटें
3. DOM में वापस डालें

<ul id='my-color-list'>
    <li class="disabled">Red</li>
    <li>Green</li>
    <li class="disabled">Purple</li>
    <li>Orange</li>
</ul>

1. उन्हें खोजें - .children() या .find()

   इससे हमें एक ऐरे जैसी वस्तु वापस मिल जाएगी।

   var $myColorList = $('#my-color-list');
   
   // Elements one layer deep get .children(), any deeper go with .find()
   var $colors = $myColorList.children('li');
   

2. उन्हें फिर से व्यवस्थित करें - Array.prototype.sort()

   यह वर्तमान में HTML सामग्री (उनके रंग उर्फ) के आधार पर आरोही क्रम में तत्वों को वापस करने के लिए सेटअप है।

   /**
    * Bind $colors to the sort method so we don't have to travel up
    * all these properties more than once.
    */
   var sortList = Array.prototype.sort.bind($colors);
   
   sortList(function ( a, b ) {
   
       // Cache inner content from the first element (a) and the next sibling (b)
       var aText = a.innerHTML;
       var bText = b.innerHTML;
    
       // Returning -1 will place element `a` before element `b`
       if ( aText < bText ) {
           return -1;
       }
   
       // Returning 1 will do the opposite
       if ( aText > bText ) {
           return 1;
       }
   
       // Returning 0 leaves them as-is
       return 0;
   });
   

3. उन्हें डालें - .append()

   ध्यान दें कि हमें पहले तत्वों को अलग करने की आवश्यकता नहीं है - append() उन तत्वों को स्थानांतरित करेंगे जो पहले से ही डोम में मौजूद हैं, इसलिए हमारे पास कोई प्रतिलिपि नहीं होगी

   // Put it right back where we got it
   $myColorList.append($colors);
   

इसे प्यारा बनाओ

एक सॉर्ट बटन जोड़ें

<!-- previous HTML above -->
<button type='button' id='btn-sort'>
    Sort
</button>

सॉर्टिंग दिशा का प्रारंभिक मान सेट करें

var ascending = true;

हमारे DOM प्रोसेस को कम से कम करने के लिए हमारे DOM एलिमेंट्स और sortList() कैश करें

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

एक doSort() फ़ंक्शन में सब कुछ लपेटें

// Put the sortList() and detach/append calls in this portable little thing
var doSort = function ( ascending ) {

    sortList(function ( a, b ) {
        // ...
    });

    $myColorList.append($colors);
};

$('#btn-sort') लिए क्लिक हैंडलर जोड़ें

$('#btn-sort').on('click', function () {
    // Run the sort and pass in the direction value
    doSort(ascending);

    // Toggle direction and save
    ascending = !ascending;
});

अब सब एक साथ

var ascending = true;

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

var doSort = function ( ascending ) {
    
    sortList(function ( a, b ) {

        var aText = a.innerHTML;
        var bText = b.innerHTML;

        if ( aText < bText ) {
            return ascending ? -1 : 1;
        }

        if ( aText > bText ) {
            return ascending ? 1 : -1;
        }

        return 0;
    });
    
    $myColorList.append($colors);

};

$('#btn-sort').on('click', function () {
    doSort(ascending);
    ascending = !ascending;
});

बक्शीश

बहु-स्तरीय छँटाई (समूहन क्रमबद्ध तत्व)

// ...

var doSort = function ( ascending ) {

    sortList(function ( a, b ) {

        // ...initial sorting...

    }).sort(function ( a, b ) {
        
        // We take the returned items and sort them once more
        var aClass = a.className;
        var bClass = b.className;
        
        // Let's group the disabled items together and put them at the end

        /**
         * If the two elements being compared have the same class
         * then there's no need to move anything.
         */
        if ( aClass !== bClass ) {
            return aClass === 'disabled' ? 1 : -1;
        }
        return 0;
    });

    // And finalize with re-insert
    $myColorList.append($colors);
};

// ...

क्या आप इसे एक कदम आगे ले जा सकते हैं?

अक्षम किए गए समूह को टॉगल करने के लिए एक और बटन जोड़ें

MDN - Array.prototyp.sort ()