How to wrap elements only if attributes match with jQuery?

Question

So I have this code:

$('.brandModelWrapperGroup').each(function(){
  var group = $(this).attr('data-model-group')

  var brandModelwrapperdivs = $(this).find(".brandModelWrapper")
  for(var i = 0; i < brandModelwrapperdivs.length; i+=4) {
    brandModelwrapperdivs .slice(i, i+4).wrapAll("<section class='brandModelLineWrapper'></section>")
  }
  var brandModelviewdivs = $(this).find(".brandModelView")
  for(var i = 0; i < brandModelviewdivs.length; i+=4) {
    brandModelviewdivs.slice(i, i+4).wrapAll("<section class='brandModelLineWrapper'></section>")
  }
})

And what it does is it wraps .brandModelWrapper and .brandModelView in .brandModelLineWrapper, but I need them to be wrapped only if both of their attribute data-model-group matches. Kind of like

if($('.brandModelView').attr('data-model-group') == group) { run the loop }

How could it be done?

jsfiddle: http://jsfiddle.net/8wczna75/1/

possible duplicate of [jQuery selectors on custom data attributes on HTML5](http://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-on-html5) — Liam, Jul 02 '15 at 12:18
`brandModelviewdivs.slice(i, i+4).wrapAll("
")` does that mean you want to wrap 4 matched item in a wrapper each time? or its a simulate action. — fuyushimoya, Jul 02 '15 at 12:33
@fuyushimoya I want to move every 4 elements to that wrapper, but those elements must also match by `data-model-group`. — Xeen, Jul 02 '15 at 12:34
And in `brandModelWrapperGroup`, there's many `brandModelWrapper` and `brandModelView`, you want to wrap them separately? — fuyushimoya, Jul 02 '15 at 12:36
@fuyushimoya no, I want to wrap them together in one wrapper and their `data-model-group` attributes must match. Also there must be no more than 4 from each. — Xeen, Jul 02 '15 at 12:38
I've created a example for you, with simplified class name though. — fuyushimoya, Jul 02 '15 at 13:00
Could you please add HTML code to your question. Your current HTML structure, and your expected HTML structure. — Jamie Barker, Jul 02 '15 at 13:19

Adam Kaczmarek · Answer 1 · 2015-07-02T12:42:08.573

0

Use this selector: [data-model-group=group]

$('.brandModelWrapperGroup').each(function(){
  var group = $(this).attr('data-model-group')

  var brandModelwrapperdivs = $(this).find(".brandModelWrapper[data-model-group="+group+"]")
  for(var i = 0; i < brandModelwrapperdivs.length; i+=4) {
    brandModelwrapperdivs .slice(i, i+4).wrapAll("<section class='brandModelLineWrapper'></section>")
  }
  var brandModelviewdivs = $(this).find(".brandModelView[data-model-group="+group+"]")
  for(var i = 0; i < brandModelviewdivs.length; i+=4) {
    brandModelviewdivs.slice(i, i+4).wrapAll("<section class='brandModelLineWrapper'></section>")
  }
})

edited Jul 02 '15 at 12:42

answered Jul 02 '15 at 12:27

Adam Kaczmarek

146
2
10

Sorry, i forgot combine text with variable: find(".brandModelWrapper[data-model-group="+group+"]") Try this: https://jsfiddle.net/f9p8dnq2/ – Adam Kaczmarek Jul 02 '15 at 12:41
So create jsfiddle, so we can see Your html structure. – Adam Kaczmarek Jul 02 '15 at 12:45
Updated my answer with a jsfiddle – Xeen Jul 02 '15 at 12:55

fuyushimoya · Answer 2 · 2015-07-02T13:10:09.257

Ok so I created one example:

Edit: Your altered jsfiddle, with css background to show it wraps.

var brandModelLineCount = 4
$('.brandModelWrapperGroup').each(function(){
    var group = $(this).attr("data-model-group");

    var targets = $(this).find(".brandModelWrapper, .brandModelView").filter('[data-model-group="' +  group + '"]');
    var i, len = targets.length;
    for (i = 0; i < len; i +=  brandModelLineCount) {
        targets.slice(i, i + brandModelLineCount).wrapAll("<section class='brandModelLineWrapper'></section>");
    }
});

$('.container').each(function(){
   var group = $(this).attr('data-group-model')
  
   var targets = $(this).find('.model,.view').filter('[data-group-model="'+  group +'"]');

    var i, len = targets.length;  
    for (i = 0; i < len;  i += 4) {
        targets.slice(i, i+4).wrapAll("<div class='wrapper'></div>")
    }

});

.container {
    width: 500px;
    background-color: gray;
}

.container div{
    display: inline-block;
}

.model {
    color : blue;
}
.view {
    color : green;
}

.wrapper {
    background-color : #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" data-group-model="wtf">
    <div class="model" data-group-model="wtf">WTFM</div>
    <div class="model" data-group-model="aaa">AAAM</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="model" data-group-model="wtf">WTFM</div>
    <div class="model" data-group-model="aaa">AAAM</div>
    <div class="model" data-group-model="wtf">WTFM</div>
    <div class="model" data-group-model="aaa">AAAM</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="model" data-group-model="wtf">WTFM</div>
    <div class="model" data-group-model="aaa">AAAM</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="model" data-group-model="wtf">WTFM</div>
    <div class="model" data-group-model="aaa">AAAM</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="model" data-group-model="wtf">WTFM</div>
    <div class="model" data-group-model="aaa">AAAM</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="model" data-group-model="wtf">WTFM</div>
    <div class="model" data-group-model="aaa">AAAM</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="view" data-group-model="wtf">WTFV</div>
    <div class="view" data-group-model="aaa">AAAV</div>
    <div class="model" data-group-model="wtf">WTFM</div>
    <div class="model" data-group-model="aaa">AAAM</div>
    <div class="view" data-group-model="wtf">WTFV</div>
</div>

I simplified your class and create some fake, so that saves my time of typing, please check if this is what you want.

Doesn't work for me, it just doesn't create the wrapper. Can you please have a look at my fiddle I've added in the question? — Xeen, Jul 02 '15 at 13:00
In your jsfiddle, you `brandModelWrapperGroup` don't have a `data-model-group` attribute, please add one. — fuyushimoya, Jul 02 '15 at 13:02

How to wrap elements only if attributes match with jQuery?

2 Answers2