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 を返すようにしたい (class="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

class="childType1" を持つすべての div をループするために .each() メソッドを使用できます。

以下は完全なコードです。必要に応じて変更してください。

<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 に答える
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 に答える