पदानुक्रम में तत्व के अस्तित्व के आधार पर पूर्वज तत्व में वर्ग जोड़ें

Question

मेरे पास नीचे एक नमूना कोड है

<li class="treeview">
 <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
 <span class="pull-right-container">
 <i class="fa fa-angle-left pull-right"></i>
 </span>
 </a>
 <ul class="treeview-menu">
    <li class="active"><a href="#">Link in level 2</a></li>
    <li><a href="#">Link in level 2</a></li>
 </ul>
</li>

यदि li में से किसी एक की कक्षा active है, तो मैं माता-पिता li या इस भाग पर active कक्षा कैसे जोड़ सकता हूं

<li class="treeview">

javascript jquery html css

1

Nardong Bagsik 24 सितंबर 2019, 06:48

Answer 1

आप .treeview ट्री पदानुक्रम के बाहर किसी भी li.active का चयन नहीं करना चाहते हैं:

$('.treeview li.active').closest('.treeview').addClass('active');

1

joshweir 24 सितंबर 2019, 04:21

Answer 2

आप इसे प्राप्त करने के लिए jQuery का उपयोग कर सकते हैं। कृपया नीचे स्निपेट ढूंढें।

$('.treeview-menu li').on('click', function() {
  $(this).addClass('active');
  $(this).closest('li.treeview').addClass('active');
})

.active>a {
  color: green;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<ul>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
 <span class="pull-right-container">
 <i class="fa fa-angle-left pull-right"></i>
 </span>
 </a>
    <ul class="treeview-menu">
      <li class=""><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>

2

Nidhin Joseph 24 सितंबर 2019, 04:04

Answer 3

यदि आपको .active वर्ग के लिए एक सक्रिय <li> के संपूर्ण treeview वंश की आवश्यकता है, तो आप jQuery के :has का उपयोग कर सकते हैं:

$('.treeview:has(li.active)').addClass('active');

$('.treeview:has(li.active)').addClass('active');

.active::before {content: 'Active - '}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li class="active">4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li>4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li>4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

यदि आपको केवल तत्काल निकटतम treeview की आवश्यकता है, तो आप .closest() का उपयोग कर सकते हैं:

$('.treeview li.active').closest(".treeview").addClass('active');

$('.treeview li.active').closest(".treeview").addClass('active');

.active::before {content: 'Active - '}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li class="active">4 (Active)</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li>4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li>4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

2

Tyler Roper 24 सितंबर 2019, 04:11

पदानुक्रम में तत्व के अस्तित्व के आधार पर पूर्वज तत्व में वर्ग जोड़ें

3 जवाब

संबंधित सवाल

नए सवाल