JQuery get a contiguous sequence of elements

I'm trying to get a contiguous array of elements using JQuery. For example for the this 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>

I want it to return the div's containing 4,5,6,7 (The first sequnce of the divs with the class="childType1").

I tried to do

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

But this of course will add the div with the text test after the last childType1 (12).

I'm not so good with JQuery.

Edit:

Since the div's are dynamically generated, I ended up adding for each "group" a special class post-fix of the id related to his group, and used the method described in suspectus's answer. Not exactly what i had in mind, but it works :D.

edited Nov 22 '18 at 2:33

Cœur

17.5k9104145

asked Jul 7 '13 at 8:16

UnTraDe

1,72062248

add a comment |

I'm trying to get a contiguous array of elements using JQuery. For example for the this 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>

I want it to return the div's containing 4,5,6,7 (The first sequnce of the divs with the class="childType1").

I tried to do

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

But this of course will add the div with the text test after the last childType1 (12).

I'm not so good with JQuery.

Edit:

edited Nov 22 '18 at 2:33

Cœur

17.5k9104145

asked Jul 7 '13 at 8:16

UnTraDe

1,72062248

add a comment |

I'm trying to get a contiguous array of elements using JQuery. For example for the this 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>

I want it to return the div's containing 4,5,6,7 (The first sequnce of the divs with the class="childType1").

I tried to do

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

But this of course will add the div with the text test after the last childType1 (12).

I'm not so good with JQuery.

Edit:

edited Nov 22 '18 at 2:33

Cœur

17.5k9104145

asked Jul 7 '13 at 8:16

UnTraDe

1,72062248

I'm trying to get a contiguous array of elements using JQuery. For example for the this 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>

I want it to return the div's containing 4,5,6,7 (The first sequnce of the divs with the class="childType1").

I tried to do

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

But this of course will add the div with the text test after the last childType1 (12).

I'm not so good with JQuery.

Edit:

javascript jquery html dom

edited Nov 22 '18 at 2:33

Cœur

17.5k9104145

asked Jul 7 '13 at 8:16

UnTraDe

1,72062248

edited Nov 22 '18 at 2:33

Cœur

17.5k9104145

asked Jul 7 '13 at 8:16

UnTraDe

1,72062248

edited Nov 22 '18 at 2:33

Cœur

17.5k9104145

edited Nov 22 '18 at 2:33

Cœur

17.5k9104145

edited Nov 22 '18 at 2:33

Cœur

17.5k9104145

asked Jul 7 '13 at 8:16

UnTraDe

1,72062248

asked Jul 7 '13 at 8:16

UnTraDe

1,72062248

asked Jul 7 '13 at 8:16

UnTraDe

1,72062248

add a comment |

4 Answers
4

active

oldest

votes

<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

answered Jul 7 '13 at 8:23

suspectus

10.7k73244

add a comment |

You can use either .each (docs) or .filter (docs). If you use .filter() you can chain another jQuery method after it.

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 );

Or more jQuery approach:

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' );

answered Jul 7 '13 at 8:41

Sumurai8

13k83161

add a comment |

You could use filter for this :

var $elements = $(".childType1").filter(function() {

  var no = parseInt($(this).text(), 10) 

  return (( no > 3) && ( no < 8))

});

now $elements will contain only those matched elements between 3 and 8 ie., 4 to 7.

answered Jul 7 '13 at 8:27

krishgopinath

10.5k12647

add a comment |

You can use .each() method for looping all the divs having class="childType1"

Following is the complete code. Modify it according to your need.

<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>

answered Jul 7 '13 at 8:35

captainsac

2,18421536

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f17510373%2fjquery-get-a-contiguous-sequence-of-elements%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

<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

answered Jul 7 '13 at 8:23

suspectus

10.7k73244

add a comment |

<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

answered Jul 7 '13 at 8:23

suspectus

10.7k73244

add a comment |

<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

answered Jul 7 '13 at 8:23

suspectus

10.7k73244

<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

answered Jul 7 '13 at 8:23

suspectus

10.7k73244

answered Jul 7 '13 at 8:23

suspectus

10.7k73244

answered Jul 7 '13 at 8:23

suspectus

10.7k73244

answered Jul 7 '13 at 8:23

suspectus

10.7k73244

add a comment |

You can use either .each (docs) or .filter (docs). If you use .filter() you can chain another jQuery method after it.

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 );

Or more jQuery approach:

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' );

answered Jul 7 '13 at 8:41

Sumurai8

13k83161

add a comment |

You can use either .each (docs) or .filter (docs). If you use .filter() you can chain another jQuery method after it.

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 );

Or more jQuery approach:

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' );

answered Jul 7 '13 at 8:41

Sumurai8

13k83161

add a comment |

You can use either .each (docs) or .filter (docs). If you use .filter() you can chain another jQuery method after it.

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 );

Or more jQuery approach:

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' );

answered Jul 7 '13 at 8:41

Sumurai8

13k83161

You can use either .each (docs) or .filter (docs). If you use .filter() you can chain another jQuery method after it.

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 );

Or more jQuery approach:

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' );

answered Jul 7 '13 at 8:41

Sumurai8

13k83161

answered Jul 7 '13 at 8:41

Sumurai8

13k83161

answered Jul 7 '13 at 8:41

Sumurai8

13k83161

answered Jul 7 '13 at 8:41

Sumurai8

13k83161

add a comment |

You could use filter for this :

var $elements = $(".childType1").filter(function() {

  var no = parseInt($(this).text(), 10) 

  return (( no > 3) && ( no < 8))

});

now $elements will contain only those matched elements between 3 and 8 ie., 4 to 7.

answered Jul 7 '13 at 8:27

krishgopinath

10.5k12647

add a comment |

You could use filter for this :

var $elements = $(".childType1").filter(function() {

  var no = parseInt($(this).text(), 10) 

  return (( no > 3) && ( no < 8))

});

now $elements will contain only those matched elements between 3 and 8 ie., 4 to 7.

answered Jul 7 '13 at 8:27

krishgopinath

10.5k12647

add a comment |

You could use filter for this :

var $elements = $(".childType1").filter(function() {

  var no = parseInt($(this).text(), 10) 

  return (( no > 3) && ( no < 8))

});

now $elements will contain only those matched elements between 3 and 8 ie., 4 to 7.

answered Jul 7 '13 at 8:27

krishgopinath

10.5k12647

You could use filter for this :

var $elements = $(".childType1").filter(function() {

  var no = parseInt($(this).text(), 10) 

  return (( no > 3) && ( no < 8))

});

now $elements will contain only those matched elements between 3 and 8 ie., 4 to 7.

answered Jul 7 '13 at 8:27

krishgopinath

10.5k12647

answered Jul 7 '13 at 8:27

krishgopinath

10.5k12647

answered Jul 7 '13 at 8:27

krishgopinath

10.5k12647

answered Jul 7 '13 at 8:27

krishgopinath

10.5k12647

add a comment |

You can use .each() method for looping all the divs having class="childType1"

Following is the complete code. Modify it according to your need.

<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>

answered Jul 7 '13 at 8:35

captainsac

2,18421536

add a comment |

You can use .each() method for looping all the divs having class="childType1"

Following is the complete code. Modify it according to your need.

<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>

answered Jul 7 '13 at 8:35

captainsac

2,18421536

add a comment |

You can use .each() method for looping all the divs having class="childType1"

Following is the complete code. Modify it according to your need.

<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>

answered Jul 7 '13 at 8:35

captainsac

2,18421536

You can use .each() method for looping all the divs having class="childType1"

Following is the complete code. Modify it according to your need.

<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>

answered Jul 7 '13 at 8:35

captainsac

2,18421536

answered Jul 7 '13 at 8:35

captainsac

2,18421536

answered Jul 7 '13 at 8:35

captainsac

2,18421536

answered Jul 7 '13 at 8:35

captainsac

2,18421536

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk