亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 jQuery 獲取嵌套列表中的上一個即時 li 項

使用 jQuery 獲取嵌套列表中的上一個即時 li 項

jeck貓 2022-08-18 10:27:22
如果我有一個嵌套列表,并且我想使用jQuery或Javascript從選擇器中獲取列表中的上一項。問題是,這是一個嵌套列表,因此前一項可能是來自另一個ol的嵌套列表項。這就是我的意思。在jQuery之前將是Django#('#topic_17')#('#topic_2')在 Django 之前將是 Bootstrap 4#('#topic_2')#('#topic_11')在 Bootstrap 4 之前將是 Frameworks#('#topic_11')#('#topic_3')在 Frameworks 之前是 CSS#('#topic_3')#('#topic_5')在CSS之前將是HTML#('#topic_5')#('#topic_1')在HTML之前將是Web開發#('#topic_1')#('#topic_13')在Web開發之前什么都不是。#('#topic_13')我看到了一些可能的方法,但真的想要一種更聰明,更通用的選擇方式,如果可能的話。我能想到的以前的元素情況:前面的 li 不是嵌套的,所以它只是$(selector).prev('li')前一個 li 是嵌套的,所以得到最后一個 li$(selector).prev('li').find('li').last()前一個 li 是父級所以$(selector).closest('ol').parent()沒有以前的 li,因為它是列表中的頂部項目。有什么通用的,簡單的方法來實現這一目標嗎?
查看完整描述

2 回答

?
守著星空守著你

TA貢獻1799條經驗 獲得超8個贊

一種方法是使用來過濾jQuery返回的匹配元素。請參閱此示例:.slice


// Get all li elements

const elements = jQuery("li");


// select the element we need

const el = jQuery("#topic_11");


// get index of the element

const idx = elements.index(el);


// get previous by slicing from the previous index (-1)

const prevElement = elements.slice(idx - 1, idx);


if (prevElement.length == 0)

  console.log("No Previous Element");


if (prevElement.length > 0)

  console.log(prevElement[0], prevElement.attr("id"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol class="list-group list-group-root sortable">


  <li id="topic_13">

    <div>

      <div>

        <span>Web Development</span>

      </div>

    </div>


    <ol>


      <li id="topic_1">

        <div>

          <div>

            <span>HTML</span>

          </div>

        </div>

      </li>


      <li id="topic_5">

        <div>

          <div>

            <span>CSS</span>

          </div>

        </div>


        <ol>


          <li id="topic_3">

            <div>

              <div>

                <span>Frameworks</span>

              </div>

            </div>


            <ol>


              <li id="topic_11">

                <div>

                  <div>

                    <span>Bootstrap 4</span>

                  </div>

                </div>

              </li>


            </ol>

          </li>

        </ol>

      </li>

    </ol>

  </li>



  <li id="topic_2">

    <div>

      <div>

        <span>Django</span>

      </div>

    </div>

  </li>



  <li id="topic_17">

    <div>

      <div>

        <span>jQuery</span>

      </div>

    </div>

  </li>


</ol>


查看完整回答
反對 回復 2022-08-18
?
千巷貓影

TA貢獻1829條經驗 獲得超7個贊

您可以在頁面上創建所有跨度的集合。單擊某個范圍時,在集合中找到該范圍的索引,然后在集合中引用該索引以訪問上一個范圍:index - 1


const spans = [...document.querySelectorAll('span')];


spans.forEach((span, i) => {

  span.addEventListener('click', (e) => {

    console.log(spans[i - 1]);

  });

});

<ol class="list-group list-group-root sortable">


  <li id="topic_13">

    <div>

      <div>

        <span>Web Development</span>

      </div>

    </div>


    <ol>


      <li id="topic_1">

        <div>

          <div>

            <span>HTML</span>

          </div>

        </div>

      </li>


      <li id="topic_5">

        <div>

          <div>

            <span>CSS</span>

          </div>

        </div>


        <ol>


          <li id="topic_3">

            <div>

              <div>

                <span>Frameworks</span>

              </div>

            </div>


            <ol>


              <li id="topic_11">

                <div>

                  <div>

                    <span>Bootstrap 4</span>

                  </div>

                </div>

              </li>


            </ol>

          </li>

        </ol>

      </li>

    </ol>

  </li>



  <li id="topic_2">

    <div>

      <div>

        <span>Django</span>

      </div>

    </div>

  </li>



  <li id="topic_17">

    <div>

      <div>

        <span>jQuery</span>

      </div>

    </div>

  </li>


</ol>


spans[i - 1]當然,會給你。如果要導航到其包含 ,請檢查范圍是否存在,如果存在,請執行 。<span><li>.closest('li')


查看完整回答
反對 回復 2022-08-18
  • 2 回答
  • 0 關注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號