我的DOM结构如下。
<ul>
<li>
<a href="#" role="button" class="js-pagination link" data-page="1">1</a>
</li>
<li>
<a href="#" role="button" class="js-pagination link active" data-page="2">2</a>
</li>
<li>
<a href="#" role="button" class="js-pagination link " data-page="3">3</a>
</li>
<li>
<a href="#" role="button" class="js-pagination link " data-page="4">4</a>
</li>
</ul>
我必须在包含class="js-pagination link active"
的元素之后选择下一个立即元素(不是相邻元素)。在我们的例子中,它是第三个li
元素。
我尝试了以下css选择器
"ul li a[class='js-pagination link active'] + li"
但由于它在li
标记的同一级别中查找a
,因此无效。我们怎样才能使用css选择器?
我不能使用.has(),因为我在selenium css select中使用这个选择器来查找元素。
答案 0 :(得分:1)
您可以使用:has()
选择li
a.js-pagination.link.active
,然后.next()
选择下一个li
元素。
$('li:has(a.js-pagination.link.active)').next('li')
$('li:has(a.js-pagination.link.active)').next('li').css('background', 'red');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#" role="button" class="js-pagination link" data-page="1">1</a></li>
<li><a href="#" role="button" class="js-pagination link active" data-page="2">2</a></li>
<li><a href="#" role="button" class="js-pagination link " data-page="3">3</a></li>
<li><a href="#" role="button" class="js-pagination link " data-page="4">4</a></li>
</ul>
&#13;
css中也没有:has()
选择器,所以唯一的方法是使用js。
答案 1 :(得分:0)
在jquery中,您可以找到课程.active
,获取其parent()
并找到next()
兄弟姐妹
$('.active').parent().next().css('background', 'green');
$('.active').parent().next().css('background', 'green');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#" role="button" class="js-pagination link" data-page="1">1</a></li>
<li><a href="#" role="button" class="js-pagination link active" data-page="2">2</a></li>
<li><a href="#" role="button" class="js-pagination link " data-page="3">3</a></li>
<li><a href="#" role="button" class="js-pagination link " data-page="4">4</a></li>
</ul>
&#13;