1

我正在尝试使用 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（类 =“childType1”的 div 的第一个序列）。

我试着做

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

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

我不太擅长 JQuery。

编辑：

由于 div 是动态生成的，因此我最终为每个“组”添加了一个与他的组相关的 id 的特殊类后缀，并使用了可疑答案中描述的方法。不完全是我的想法，但它有效：D。

4

4 回答 4

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' );
于 2013-07-07T08:41:41.157 回答
0 
<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
于 2013-07-07T08:23:40.803 回答
0

你可以用filter这个：

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

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

于 2013-07-07T08:27:15.207 回答
0

您可以使用 .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>
于 2013-07-07T08:35:50.027 回答