यदि सूची आइटम छह से अधिक हैं तो मैं div तत्व के क्लिक पर या पृष्ठ लोड पर एक मूल खोज div दिखाना चाहता हूं। मैं siblings() और siblings().closest() के साथ प्रयास करता हूं लेकिन काम नहीं कर रहा हूं।

कृपया नीचे दिए गए कोड और कोडपेन लाइव कोड लिंक को देखें।

कोड :https://codepen.io/codepat007/pen/BaKvvoE

$(document).on('click', '.wrap', function() {

  if ($(this).find('.searchresult ul li').length > 6) {
    $(this).siblings().closest('.SearchWrap').show();
  }

});
.wrap {
  float: left;
  width: 30%
}

.SearchWrap {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <p>123</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
    </ul>
  </div>
</div>


<div class="wrap">
  <p>456</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
    </ul>
  </div>
</div>

<div class="wrap">
  <p>789</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <div class="nodata">no data</div>
  </div>
</div>
0
Viking 23 सितंबर 2020, 17:51

2 जवाब

सबसे बढ़िया उत्तर

मैं पृष्ठ पर विभिन्न तत्वों के प्रदर्शन, या छिपाने को संभालने के लिए सीएसएस वर्ग-नामों का उपयोग करने का सुझाव दूंगा, यह अक्सर व्यक्तिगत तत्वों की इनलाइन style विशेषता में हेरफेर करने से अधिक विश्वसनीय और एक्स्टेंसिबल होता है, खासकर यदि आपको आवश्यकता है कई गुणों में हेरफेर करने के बाद उन तत्वों को उनकी डिफ़ॉल्ट स्थिति में वापस लाने के लिए।

आदर्श रूप से तत्वों को छिपाया जाना चाहिए, और इसलिए वर्ग को जावास्क्रिप्ट के साथ जोड़ा जाना चाहिए ताकि पृष्ठ पर जावास्क्रिप्ट की अनुमति के अभाव में तत्व दिखाई दे सकें। यही कारण है कि मैंने लाइन भी जोड़ी है

$('.SearchWrap').addClass('hidden');

जावास्क्रिप्ट के लिए, नीचे। उस ने कहा, एक दृष्टिकोण नीचे है:

// causes the enclosed functionality to execute only once the
// document is ready, and the content loaded:
$(document).ready(function() {

  // using jQuery to find the '.SearchWrap' elements
  // and add the 'hidden' class-name to them in order
  // hide them on page-load:
  $('.SearchWrap').addClass('hidden');

  // binding the anonymous function of the on() method as the
  // event-handler for the 'click' event when that event
  // originates from, or from within, an element with the
  // class-name of 'wrap':
  $(document).on('click', '.wrap', function() {

    // here 'this' (and $(this)) refer to the .wrap
    // element upon, or within, which the 'click' orginated:
    $(this)

      // from the .wrap' element we find the '.SearchWrap'
      // descendant(s) and we call the toggleClass() method:

      .find('.SearchWrap')
      // within the toggleClass() method-call we pass a
      // class-name ('hidden') and an assessment:
      .toggleClass('hidden',
      
        // if this assessment evaluates to true then
        // the class-name is added, if it evaluates
        // to false it is removed or not-added. The
        // assessment here is to find the elements
        // within the current .wrap element that match
        // the CSS selector, and tests that the length
        // is less than 6; in this way if the length
        // is less than 6 (and evaluates to true) the
        // 'hidden' class-name is applied to .SearchWrap
        // otherwise, if the element is 6 or more the
        // assessment evaluates to false, and the
        // 'hidden' class-name is removed or not-added,
        // so .SearchWrap remains visible or becomes
        // visible:
        $(this).find('.searchresult li').length < 6
      );
    });
});
$(document).ready(function() {
  $('.SearchWrap').addClass('hidden');
  $(document).on('click', '.wrap', function() {
    $(this).find('.SearchWrap').toggleClass('hidden',
      $(this).find('.searchresult li').length < 6
    );
  });
});
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  gap: 2vw;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5em;
}

.wrap {
  border: 1px solid #000;
}

.SearchWrap {
  display: initial;
}

.SearchWrap.hidden {
  display: none;
}

ul,
li {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <p>123</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
    </ul>
  </div>
</div>


<div class="wrap">
  <p>456</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
    </ul>
  </div>
</div>

<div class="wrap">
  <p>789</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <div class="nodata">no data</div>
  </div>
</div>

JS Fiddle डेमो

सन्दर्भ:

2
David says reinstate Monica 23 सितंबर 2020, 18:48

आपको अपने DOM ट्रैवर्सल में कुछ समस्याएँ हैं। आइए बाद के संदर्भ के लिए क्लिक किए गए पैराग्राफ को कैप्चर करें और क्लास मॉडिफायर के साथ siblings() फ़ंक्शन का उपयोग करें।

$(document).on('click', '.wrap p', function() {
  const paragraph = $(this);

  if (paragraph.siblings('.searchresult').find('ul li').length > 6) {
    paragraph.siblings('.SearchWrap').show();
  }
});
2
isherwood 23 सितंबर 2020, 18:09