jQuery ప్రసరణ - filter() పద్ధతి

ప్రకటన

మార్చు అన్ని div రంగును మరియు క్లాస్ పేరు "middle"కు కాంతిసరిహద్దు జోడించు

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

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

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

filter() పద్ధతి ప్రదర్శించబడుతున్న ఎల్లి సమాహారాన్ని ప్రదర్శించబడుతున్న ఎంపికకర్తలకు కనీసం ప్రదర్శించబడుతుంది.

వినియోగం మరియు సంకేతం

.filter(selector)
పారామితులు వివరణ
selector పదబంధం విలువ, ప్రస్తుత ఎల్లి కోసం ఎంపికకర్తలను ప్రదర్శించడానికి ఉపయోగించే ఎంపికకర్తల ప్రకటన.

వివరణాత్మకం

ప్రదర్శించబడుతున్న డాక్యుమెంట్ మెటా పోర్టల్ ఎంపికకర్తలను ప్రదర్శించడానికి .filter() పద్ధతిని ఉపయోగిస్తుంది. ఎంపికకర్తలను ప్రదర్శించడానికి ఉపయోగించే ఎంపికకర్తలు ప్రతి ఎల్లిపై పరీక్షిస్తాయి; అన్ని ఎంపికకర్తలు అన్నింటికీ ఎంపికకర్తలు అన్నింటికీ చేర్చబడతాయి.

దిగువ కింద సాధారణ జాబితాను కలిగిన పేజీని చూడండి:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

ఈ జాబితా అంశాల సమాహారానికి ఈ పద్ధతిని అనువర్తించవచ్చు:

$('li').filter(':even').css('background-color', 'red');

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

ఈ కాల్లో ఫలితంగా, ప్రాజెక్ట్ 1, 3, 5 యొక్క బ్యాక్గ్రౌండ్ కలర్ రెడ్ చేయబడుతుంది, ఎందుకంటే వాటిని అన్నింటికీ ఎంపికకర్తలు ముందుగా కనుగొన్నారు (జ్ఞాపకంలో ఉంచుకోండి, :even మరియు :odd రెండింటికీ 0 ఆధారిత ఇండెక్స్ ఉపయోగిస్తారు).

ఫిల్టర్ ఫంక్షన్ ఉపయోగించండి

ఈ పద్ధతిని రెండవ రూపంలో ఉపయోగించడం అంటే, ఎంపికకర్తలను ప్రకరణం ద్వారా ఎంపికచేయడం. ప్రతి ఎల్లికి, ఈ ప్రకరణం సమానంగా తిరిగివచ్చినట్లయితే, ఎల్లికి కూడా చేర్చబడుతుంది; మరియు లేకపోతే, ఎల్లికి కూడా చేర్చబడదు.

దిగువ కింద కొన్నిగా సంక్లిష్టమైన HTML పాను చూడండి:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

ఈ జాబితా అంశాలను ఎంచుకొని, వాటి విషయం ఆధారంగా వాటిని స్క్రీన్ చేయవచ్చు:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');