Question

使用这个html结构：

...
<div class="a">April 2018</div>
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I want get this tag (and its children) --> 
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="d">...</div>
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="d">...</div> <!-- I don't want get this tag ! -->
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
...

我希望在数组中保存带有类“c”的第一个div元素的列表，在第一个div元素之前使用类“d”。我怎么能通过jquery选择器或xpath选择器来做到这一点？我找不到怎么做..

谢谢:)

Answer 1

您可以使用.prevAll()
使用.eq()选择第一个带有类d的元素，然后选择.prevAll()以获取所有带有类c的元素

$('.d').eq(0).prevAll('.c').css('color','red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">April 2018</div>
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I want get this tag (and its children) --> 
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="d">...</div>
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="d">...</div> <!-- I don't want get this tag ! -->
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->

Answer 2

使用prevAll在c课程之前找到课程d的上一个div。

$('.d:first').prevAll("div.c").each(function (index, element) {
console.log($(this).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">April 2018</div>
<div class="b">Monday 02</div>
<div class="c">1.I want get this tag (and its children)</div>
<!-- I want get this tag (and its children) -->
<div class="c">2.I want get this tag (and its children)</div>
<!-- I want get this tag (and its children) -->
<div class="c">3.I want get this tag (and its children)</div>
<!-- I want get this tag (and its children) -->
<div class="c">4.I want get this tag (and its children)</div>
<!-- I want get this tag (and its children) -->
<div class="d">...</div>
<div class="b">Monday 02</div>
<div class="c">...</div>
<!-- I don't want get this tag ! -->
<div class="c">...</div>
<!-- I don't want get this tag ! -->
<div class="c">...</div>
<!-- I don't want get this tag ! -->
<div class="c">...</div>
<!-- I don't want get this tag ! -->
<div class="d">...</div>
<!-- I don't want get this tag ! -->
<div class="b">Monday 02</div>
<div class="c">...</div>
<!-- I don't want get this tag ! -->
<div class="c">...</div>
<!-- I don't want get this tag ! -->

Answer 3

这是一个没有jQuery的选项：

使用querySelector(".d") [0]获取带有className div的第一个d，然后使用previousSibling遍历上一个divs，直到className不同为止比c然后break;

let wantedDivs = [];
let element = document.querySelectorAll('.d')[0];

while(element = element.previousElementSibling){
    if(element.className != "c")
        break;
    else
        wantedDivs.push(element);
}

console.log(wantedDivs);

Answer 4

你可以通过为每个div使用$ .each来获得这个

   var arr = [];
    $(document).ready(function(){
        $('div').each(function() {
         if ($(this).hasClass('c')) {
                arr.push($(this).html());
      }
      if ($(this).hasClass('d')) {
        return false;
        }
    });
    });

通过jquery或spath选择器从html标签的liste中选择特定的html标签

4 个答案: