Question

我在下面有一个列表，我想在li元素之后添加内容中包含ul个元素的内容。我怎么能用CSS或jQuery做到这一点？

<ul>
    <li> item 1 </li>
    <li> item 2 
        <ul>
            <li> item 2.1 </li>
            <li> item 2.2 </li>
        </ul>
    </li>
    <li> item 3 </li>
</ul>

Answer 1

通过选择带有直接ul的li然后返回其父

<span>

from selenium import webdriver

driver=webdriver.Chrome(executable_path=r'C:\Utility\BrowserDrivers\chromedriver.exe')
driver.get("https://www.youtube.com/watch?v=F-eMt3SrfFU")
my_views = driver.find_element_by_xpath("//span[@class='view-count style-scope yt-view-count-renderer']").text
print(my_views)

Answer 2

试试这个：

$(document).ready(function(){
    $('li > ul').each(function(){
        $(this).before('<span style="color:red">[I Have Content]</span>');
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<ul>
   <li> item 1 </li>
   <li> item 2 
       <ul>
         <li> item 2.1 </li>
         <li> item 2.2 </li>
      </ul>
   </li>
   <li> item 3 </li>
</ul>

Answer 3

将您的内容包含在li中的内容中，并尝试在使用css后附加一些内容，如下所述

ul>li span::after{
content:' hello';
}

<ul>
   <li> <span>item 1</span> </li>
   <li> <span>item 2</span>
       <ul>
         <li> <span>item 2.1</span> </li>
         <li> <span>item 2.2</span> </li>
      </ul>
   </li>
   <li> <span>item 3</span> </li>
 </ul>

希望这有帮助

Answer 4

jQuery为此提供了:has伪选择器，不幸的是CSS 没有具有：

$('ul > li:has(li)').append('<span>span</span>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li> item 1 </li>
   <li> item 2 
       <ul>
         <li> item 2.1 </li>
         <li> item 2.2 </li>
      </ul>
   </li>
   <li> item 3 </li>
 </ul>

Answer 5

试试这个css：

li>ul>li:after{
content: "what you want to add";
}

它只会选择里面的ul＆gt; li。

找到所有包含ul的li元素

5 个答案: