Question

我正在尝试使用JQuery获取连续的元素数组。例如对于这个html：

<div class="parent">
    <div class="childType2">1</div>
    <div class="childType2">2</div>
    <div class="childType2">3</div>
    <div class="childType1">4</div>
    <div class="childType1">5</div>
    <div class="childType1">6</div>
    <div class="childType1">7</div>
    <div class="childType2">8</div>
    <div class="childType1">9</div>
    <div class="childType1">10</div>
    <div class="childType1">11</div>
    <div class="childType1">12</div>
</div>

我希望它返回包含4,5,6,7的div（带有class =“childType1”的div的第一个sequnce）。

我试着做

$("<div>test</div>")($('.parent .childType2').siblings('.childType1').addBack());

但是这当然会在最后一个childType1（12）之后添加带有文本测试的div。

我对JQuery不太满意。

修改

由于div是动态生成的，我最终为每个“组”添加了与其组相关的id的特殊类后置修复，并使用了suspectus的答案中描述的方法。不完全是我的想法，但它的确有效：D。

Answer 1

您可以使用.each（docs）或.filter（docs）。如果你使用.filter()，你可以在它之后链接另一个jQuery方法。

var state = 0;
var elements = [];

$('.parent div').each( function( i, elem ) {
    if( state != 2 && elem.className === "childType1" ) {
        state = 1;
        elements.push( elem );
    } else if ( state == 1 ) {
        state = 2;
    }
} );

console.log( elements );

或更多jQuery方法：

var state = 0;

$('.parent div').filter( function() {
    if( state != 2 && $(this).hasClass( "childType1" ) ) {
        state = 1;
        return true;
    } else if ( state == 1 ) {
        state = 2;
    }
    return false;
} ).css( 'background-color', 'red' );

Answer 2

<div class="parent">
    <div class="childType2">1</div>
    <div class="childType2">2</div>
    <div class="childType2">3</div>
    <div class="childType1 inner">4</div>
    <div class="childType1 inner">5</div>
    <div class="childType1 inner">6</div>
    <div class="childType1 inner">7</div>
    <div class="childType2">8</div>
    <div class="childType1">9</div>
    <div class="childType1">10</div>
    <div class="childType1">11</div>
    <div class="childType1">12</div>
</div> 

 $(".inner") // gives the elements required

Answer 3

您可以使用filter：

var $elements = $(".childType1").filter(function() {
  var no = parseInt($(this).text(), 10) 
  return (( no > 3) && ( no < 8))
});

现在$elements将只包含3到8之间匹配的元素，即4到7。

Answer 4

您可以使用.each（）方法循环所有具有class =“childType1”的div

以下是完整的代码。根据您的需要进行修改。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript">
 $(function () {
    $(".childType1").each(function (i) {
            if ( $(this).html() == "4" ||$(this).html() == "5" || $(this).html() == "6" ||$(this).html() == "7") {
            alert($(this).html());
            } 
        });
   });
</script>
</head>
<body>
<div class="parent">
    <div class="childType2">1</div>
    <div class="childType2">2</div>
    <div class="childType2">3</div>
    <div class="childType1">4</div>
    <div class="childType1">5</div>
    <div class="childType1">6</div>
    <div class="childType1">7</div>
    <div class="childType2">8</div>
    <div class="childType1">9</div>
    <div class="childType1">10</div>
    <div class="childType1">11</div>
    <div class="childType1">12</div>
</div>
</body>
</html>

JQuery获得一个连续的元素序列

4 个答案: