jquery वर्ग के साथ निकटतम पिछले भाई-बहन को ढूंढती है

Question

यहाँ एक मोटा html है जिसके साथ मुझे काम करना है:

<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li> // this is the single element I need to select
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat current_sub"></li> // this is where I need to start searching
<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li>

मुझे इससे पीछे हटने की जरूरत है .current_sub, निकटतम पिछले को ढूंढें .par_catऔर इसे सामान करें।

.find("li.par_cat")का पूरा भार लौटाता है .par_cat(मुझे पेज पर लगभग 30 मिला है)। मुझे सिंगल का टारगेट चाहिए।

वास्तव में किसी भी सुझाव की सराहना करेंगे :)

Comments

वाह, बिल्लियों वास्तव में सभी इंटरनेट पर हैं! अब हमें बराबर बिल्लियाँ और उप बिल्लियाँ भी मिल गई हैं।

— जेडी स्मिथ

Answer 1

प्रयत्न:

$('li.current_sub').prevAll("li.par_cat:first");

अपने मार्कअप के साथ इसका परीक्षण किया:

$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");

li.par_cat"woohoo" के साथ निकटतम पिछले को भर देगा ।

Comments

धन्यवाद करीम। यह भी अच्छी तरह से काम किया है, लेकिन मुझे लगता है कि .prev () कम संसाधनों को खाएगा, जैसा कि .prevAll को सभी पिछले मिलान किए गए तत्व मिलेंगे और फिर मुझे उसकी आवश्यकता होगी। एड का जवाब स्वीकार करना।

— डॉयलाग

वास्तव में, थोड़े से पाठ के बाद, .prev () कुछ उदाहरणों में विफल रहा। .prevAll के साथ: सबसे पहले, हर बार काम किया। धन्यवाद।

— डॉलेक्स

.prev () केवल तुरंत पूर्ववर्ती तत्व की जांच करता है। मैंने नीचे दिए गए उत्तर के साथ टिप्पणी को jsFiddle के साथ जोड़ दिया। चारों ओर देखने के बाद, यह सबसे अच्छा जवाब है, क्योंकि इसे सभी तत्वों के माध्यम से चक्र करना है, इसे खोजने के लिए सभी कार्यों को फ़िल्टर करने के लिए दो कार्यों की आवश्यकता नहीं है।

— डेविड होब्स

क्या इसका मतलब :firstउन चयनित तत्वों की सूची पर काम कर रहा है जो चयनित ऑब्जेक्ट के सबसे करीब से शुरू होते हैं (पृष्ठ के सापेक्ष नीचे से ऊपर तक विरोध किया जाता है)?

— NReilingh

बहुत उपयोगी उत्तर के लिए बहुत बहुत धन्यवाद। क्या आप कृपया @NReilingh प्रश्न का उत्तर दे सकते हैं क्योंकि यह वास्तव में मुझे भ्रमित करता है। नहीं है :firstएक CSS चयनकर्ता कि चयन में पहला तत्व डोम (जैसे div.red:firstमें पहली लाल DIV का चयन करेंगे डोम ) jQuery चयनकर्ता अलग ढंग से पार्स किया?

— अकाउंटेंट एन

Answer 2

प्रयत्न

$('li.current_sub').prev('.par_cat').[do stuff];

Comments

रुको क्या? क्या यह केवल तुरंत पूर्ववर्ती तत्व की जांच नहीं करता है? इस प्रकार आपका कोड शून्य हो जाएगा? - यहाँ यह jsFiddle पर परीक्षण किया गया है: jsfiddle.net/Y2TEH

— डेविड

@DavidHobs मैंने यह दो साल पहले लिखा था .... मैं निश्चित रूप से इन दिनों प्रचलित () का उपयोग करूंगा।

— एड जेम्स

@EdWoodcock उस स्थिति में, आपके उत्तर को अपडेट करने पर विचार करता है।

— ह्यूगो जिंक

Answer 3

PrevUntil () का उपयोग करके हम सभी को प्राप्त किए बिना एक दूर के भाई को प्राप्त करने की अनुमति देंगे। मेरे पास एक विशेष रूप से लंबा सेट था जो prevAll () का उपयोग करके बहुत अधिक सीपीयू गहन था।

var category = $('li.current_sub').prev('li.par_cat');
if (category.length == 0){
  category = $('li.current_sub').prevUntil('li.par_cat').last().prev();
}
category.show();

यदि यह मेल खाता है, तो यह पहली पूर्ववर्ती सिबलिंग हो जाती है, अन्यथा यह उस मैच से पहले वाले सिबलिंग को प्राप्त करता है, इसलिए हम वांछित तत्व प्राप्त करने के लिए प्राइम () के साथ एक और बैक अप लेते हैं।

Answer 4

मुझे लगता है कि सभी उत्तरों में कुछ कमी है। मैं कुछ इस तरह का उपयोग करना पसंद करता हूं

$('li.current_sub').prevUntil("li.par_cat").prev();

आपके द्वारा नहीं जोड़े जाने से बचता है: पहले चयनकर्ता के अंदर और पढ़ने और समझने में आसान है। prevUntil () मेथड में प्रचलित () का उपयोग करने के बजाय एक बेहतर प्रदर्शन है

Answer 5

आप इस कोड का पालन कर सकते हैं:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
</script>
<?php

for ($i = 1; $i <= 5; $i++) {
    echo'<div class = "division">'
        . '<form method="POST" action="">'
        . '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
        . '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
        . '</form></div>';
}
?>

आप इससे अंदाजा लगा सकते हैं।