జూనీక్స్ పరిగణన - closest() మాధ్యమం

jQuery పరిగణనా పాఠ్యక్రమం

ఉదాహరణ

ఈ ఉదాహరణ లో, closest() ద్వారా ఇవెంట్ డెలిగేషన్ ని ప్రదర్శిస్తుంది. అతి సమీప జాబితా అంశం లేదా దాని పిల్లల అంశాలను క్లిక్ చేసినప్పుడు, పసుపు బ్యాక్గ్రౌండ్ ని మార్చుతుంది:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

స్వయంగా ప్రయత్నించండి

నిర్వచనం మరియు ఉపయోగం

closest() మాధ్యమం అనుకూలించిన సెలెక్టర్ వచ్చిన అంశాన్ని పొంది, ప్రస్తుత అంశం నుండి డామ్ ట్రీలో పైకి పరిగణించబడుతుంది.

సింథాక్స్

.closest(selector)
పారామీటర్స్ వివరణ
selector అంశం వాల్యూ స్ట్రింగ్, అనుకూలించిన అంశం యొక్క సెలెక్టర్ ఎక్స్ప్రెషన్ ని కలిగి ఉంటుంది.

వివరణ

డామ్ ట్రీలో అంశాల సమాహారం వచ్చిన జూనీక్స్ ఆబ్జెక్ట్ ని ఇచ్చినప్పుడు, .closest() మాధ్యమం మాకు డామ్ ట్రీలో ఆ అంశాలు మరియు వాటి పూర్వపు అంశాలను పరిగణించి, అనుకూలించిన అంశం నుండి నూతన జూనీక్స్ ఆబ్జెక్ట్ ని సృష్టించడానికి అనుమతిస్తుంది..parents() .closest() మాధ్యమం అనుకూలించబడింది, వాటికి అనుకూలించబడింది. వాటిలో వ్యత్యాసం చిన్నది కానీ ముఖ్యమైనది:

.closest() .parents()
ప్రస్తుత అంశం నుండి ప్రారంభిస్తారు ప్రాధమిక అంశం నుండి ప్రారంభిస్తారు
డామ్ ట్రీలో పైకి పరిగణించి, అనుకూలించిన సెలెక్టర్ వచ్చిన అంశం వరకు పరిగణించబడుతుంది. డాక్యుమెంట్ పునర్మూల అంశం వరకు డామ్ ట్రీలో పైకి పరిగణించి, ప్రతి పూర్వపు అంశాన్ని ఒక తాత్కాలిక సమాహారంలో చేరుస్తారు; అలాగే అనుకూలించిన సెలెక్టర్ వచ్చితే, ఆ సమాహారాన్ని ఆ సెలెక్టర్ పై స్క్రీనింగ్ చేస్తారు.
కించిన కాలికించిన అంశాలు లేని లేదా ఒక అంశం ఉన్న జూనీక్స్ ఆబ్జెక్ట్ అందిస్తుంది కించిన కాలికించిన అంశాలు లేని, ఒక అంశం లేదా అంశాలు ఉన్న జూనీక్స్ ఆబ్జెక్ట్ అందిస్తుంది

దిగువన వున్న హెచ్చిఎమ్ఎల్ పాను చూడండి:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

ఉదాహరణ 1

ఇది కుర్రాలుకు నుండి <ul> కెంద్రాన్ని కోరుకున్నాం అని భావించండి:

$('li.item-a').closest('ul').css('background-color', 'red');

స్వయంగా ప్రయత్నించండి

ఇది లెవల్-2 <ul> రంగును మార్చుతుంది, ఎందుకంటే అది పైకి పెరిగేటప్పుడు మొదటి ఎలా కెంద్రాన్ని కలుసుకుంటుంది.

ఉదాహరణ 2

ఇది <li> కెంద్రాన్ని కోరుకున్నాం అని భావించండి:

$('li.item-a').closest('li').css('background-color', 'red');

స్వయంగా ప్రయత్నించండి

ఇది కుర్రాలుకు రంగును మార్చుతుంది. .closest() పద్ధతి కుర్రాలుకు స్టార్ట్ చేసి పైకి పెరిగేటప్పుడు, కుర్రాలుకు సర్చ్ చేస్తుంది అప్పటికే ఎలా సర్చ్ చేస్తుంది.

ఉదాహరణ 3

మేము DOM కెంద్రంగా పాస్ చేయవచ్చు, అక్కడ అత్యంత సమీప కెంద్రాన్ని కోరుకున్నాం.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

స్వయంగా ప్రయత్నించండి

ఈ కోడ్ లెవల్-2 <ul> రంగును మార్చుతుంది ఎందుకంటే అది కుర్రాలుకు అతి ప్రథమ గుర్రుడు మరియు కుర్రాలుకు ఉపగామిగా ఉంటుంది. అది లెవల్-1 <ul> రంగును మార్చదు ఎందుకంటే అది కుర్రాలుకు ఉపగామిగా కాదు.

jQuery పరిగణనా పాఠ్యక్రమం