Question

下面是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。

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

Answer 1

您可以在第一个孩子的选择器中使用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>

Answer 2

我看到了jQuery标签，所以我想如果您仍然在项目中使用jQuery，我会选择其他解决方案

$('.a ul').each(function(i, v) {
    console.log($(v).find('span').first());
})

如果您要确保跨度在li的范围内，则可以更具体，但是在奇数情况下不应真正需要

$('.a ul').each(function(i, v) {
 console.log($(v).find('li span').first());
})

如何获得另一个动态div内的动态li内span的第一个值

2 个答案: