时间戳

首页 > 解决方案 > 如何在另一个动态div中的动态li中获取span的第一个值

javascript - 如何在另一个动态div中的动态li中获取span的第一个值

问题描述

下面是HTML结构

<div class="a">
   <ul class="b">
       <li class="c">
           <span>123</span>
       </li>

       <li class="c">
           <span>345</span>
       </li>

       <li class="c">
          <span>678</span>
      </li>
  </ul>
</div>

<div class="a">
    <ul class="b">
        <li class="c">
            <span>976</span>
        </li>   
    </ul>
</div>


<div class="a">
    <ul class="b">
        <li class="c">
            <span>234</span>
        </li>   
        <li class="c">
            <span>789</span>
        </li>   
    </ul>
</div>

我想在for循环中获取每个动态div的第一个跨度的值。这里的挑战是li也是动态的。一个div内可以有1到4个li。

当我尝试循环时，我得到了所有的跨度值。请提出解决方案提前谢谢！

标签： javascriptjqueryhtml

解决方案

您可以在第一个孩子的选择器中使用querySelectorAll()和使用nth-child(1)。

div > ul > li:nth-child(1) > span:nth-child(1)

这里是工作片段

let x = document.querySelectorAll('div > ul > li:nth-child(1) > span:nth-child(1)');
x.forEach(x => console.log(x.innerHTML))
<div class="a">
   <ul class="b">
       <li class="c">
           <span>123</span>
       </li>

       <li class="c">
           <span>345</span>
       </li>

       <li class="c">
          <span>678</span>
      </li>
  </ul>
</div>

<div class="a">
    <ul class="b">
        <li class="c">
            <span>976</span>
        </li>   
    </ul>
</div>


<div class="a">
    <ul class="b">
        <li class="c">
            <span>234</span>
        </li>   
        <li class="c">
            <span>789</span>
        </li>   
    </ul>
</div>

推荐阅读