.each(function()) - operating on each element

  • (2 Pages)
  • +
  • 1
  • 2

19 Replies - 2544 Views - Last Post: 08 September 2014 - 07:56 AM

#1 depricated   User is offline

  • Nero


Reputation: 2532
  • View blog
  • Posts: 6,273
  • Joined: 13-September 08

.each(function()) - operating on each element

Posted 05 September 2014 - 02:05 PM

I've started here:

http://api.jquery.com/each/


and I've been trying to get this function to work properly for over an hour.

Here's my function - maybe you can see what I'm doing wrong at a glance

function addStriping() {
    var displayWeight = 0;
    $(".optionDiv").removeClass("odd").removeClass("even").each(function(index, element) {
        if (displayWeight % 2 == 0)
        {
            $(element).addClass("even");
        } else {
            $(element).addClass("odd");
        }
        displayWeight += 1;
    });
}


What isn't working is the .addClass function. Specifically though, the error is that the Object doesn't support that method. Obviously, I'm screwing up somewhere in here.

The jQuery documentation gives the explicit example of "$(element).css("background-color","yellow") which gives the same error message.

This isn't even considering whether the iteration is top-down or not. I may have to redo the logic in the end but I still need to be able to assign classes...

Is This A Good Question/Topic? 0
  • +

Replies To: .each(function()) - operating on each element

#2 depricated   User is offline

  • Nero


Reputation: 2532
  • View blog
  • Posts: 6,273
  • Joined: 13-September 08

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 02:11 PM

addition: I've also tried this.addClass, $(this).addClass, and element.addClass
Was This Post Helpful? 0
  • +
  • -

#3 CasiOo   User is offline

  • D.I.C Lover
  • member icon

Reputation: 1578
  • View blog
  • Posts: 3,551
  • Joined: 05-April 11

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 02:24 PM

Your code doesn't give me any errors at all, and it works as expected

As an alternative, you could choose not to use .each
addClass accepts a function which return the class name that should be added
$(".optionDiv").removeClass("odd").removeClass("even").addClass(function (index) {
	return index % 2 === 0 ? 'even' : 'odd';
});


Test code for your snippet
<!DOCTYPE html>
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="optionDiv even">d</div>
		<div class="optionDiv even">d</div>
		<div class="optionDiv odd">d</div>
		<div class="optionDiv"></div>
		
		<script>
			function addStriping() {
				var displayWeight = 0;
				$(".optionDiv").removeClass("odd").removeClass("even").each(function(index, element) {
					if (displayWeight % 2 == 0)
					{
						$(element).addClass("even");
					} else {
						$(element).addClass("odd");
					}
					displayWeight += 1;
				});
			}
			
			addStriping();
		</script>
	</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#4 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 02:31 PM

I created a rough test page as well ;) and the code works or, at least, runs:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Some Title</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.odd {
  color: blue;
}
.even {
  color: yellow;
}
</style>
</head>
<body>
<div class="optionDiv odd">this one</div>
<div class="optionDiv even">this other one</div>
<button onclick="addStriping()">Click me</button>
<script>
var displayWeight = 0;
function addStriping() {
    $(".optionDiv").removeClass("odd").removeClass("even").each(function(index, element) {
        if (displayWeight % 2 == 0)
        {
            $(element).addClass("even");
        } else {
            $(element).addClass("odd");
        }
        console.log(displayWeight);
        displayWeight += 1;
    });
}

</script>
</body>
</html>

It won't toggle though, in part because displayWeight is reset to 0 each time, which is why I moved that line out of the function.
Was This Post Helpful? 1
  • +
  • -

#5 depricated   User is offline

  • Nero


Reputation: 2532
  • View blog
  • Posts: 6,273
  • Joined: 13-September 08

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 02:34 PM

haha that's actually what I came to but much more elegently done. I remembered that functions can be variables and wrote:

var displayWeight = 0;
function setStriping() {
    displayWeight = 0;
    $(".optionDiv").removeClass("odd").removeClass("even").addClass(function() {
        if (displayWeight % 2 == 0)
        {
            displayWeight += 1;
            return "even";
        } else {
            displayWeight += 1;
            return "odd";
        }
        
    });
}


And it's working as desired this way. I don't use jQuery very often, this was just thrown at me to make work with jQuery haha. I'll try it with ternary on index like you wrote and see how it performs. Thanks!
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 02:36 PM

Perhaps I've misunderstood..? There is toggleClass:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Some Title</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.odd {
  color: blue;
}
.even {
  color: yellow;
}
</style>
</head>
<body>
<div class="optionDiv odd">this one</div>
<div class="optionDiv even">this other one</div>
<button onclick="addStriping()">Click me</button>
<script>
function addStriping() {
    $(".optionDiv").toggleClass("odd even");
}
</script>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#7 depricated   User is offline

  • Nero


Reputation: 2532
  • View blog
  • Posts: 6,273
  • Joined: 13-September 08

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 03:00 PM

I'm writing a page that uses Ajax to call an MVC controller which returns a page written in HTML with Razor and dump it into a div. Each div has an Edit, Delete, and Select button. The divs are displayed in rows and show customer data. Whenever a div is deleted, it's removed from the page, and the divs need to update their odd/even 'striping' to remain consistant if a row between two other rows is removed.

Make sense?
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 03:07 PM

This can be done with css alone, using nth-child(odd) and nth-child(even) selectors.

example

The example uses a table, which is most common, but it will work equally well with any child-elements, such as divs within a container div.

This post has been edited by andrewsw: 05 September 2014 - 03:09 PM

Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 03:20 PM

It can work even if the elements to be changed aren't direct children of the containing element:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Some Title</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#container .optionDiv:nth-child(odd) span {
  color: red;
}
#container .optionDiv:nth-child(even) span {
  color: yellow;
}
</style>
</head>
<body>
<div id="container">
<div class="optionDiv"><span>this one</span> not </div>
<div class="optionDiv"><span>this other</span> one</div>
<div class="optionDiv"><span>this one</span> not </div>
<div class="optionDiv"><span>this other</span> one</div>
<div class="optionDiv"><span>this other</span> one</div>
<div class="optionDiv"><span>this other</span> one</div>
</div>
</body>
</html>

This post has been edited by andrewsw: 05 September 2014 - 03:21 PM

Was This Post Helpful? 0
  • +
  • -

#10 ge∅   User is offline

  • D.I.C Lover

Reputation: 319
  • View blog
  • Posts: 1,335
  • Joined: 21-November 13

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 03:33 PM

I just wanted to point out that a row that is not even is odd ;)

Moreover, if you plan on using a container, you'd better call it optionDivs or something and drop the class attribute on your divs. When contiguous elements have a same class name it usually means you can find a better way to target them.

This post has been edited by ge∅: 05 September 2014 - 03:39 PM

Was This Post Helpful? 0
  • +
  • -

#11 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 04:14 PM

I kept the optionDiv class-names in my example to tie-in with the OPs earlier code ;)

Or.. I was just too lazy to remove them :)
Was This Post Helpful? 0
  • +
  • -

#12 depricated   User is offline

  • Nero


Reputation: 2532
  • View blog
  • Posts: 6,273
  • Joined: 13-September 08

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 06:56 PM

I'll mess with that monday morning. How would that mesh with nested divs though? Right now the relevant part looks a little like

<divContainer> //always exists
  <divOption>  //parent of each selectable option, can be deleted from page - flex columns. This is where the background needs to be restyled.
    @for each unit 
      <divUnit> //parent of each configurable unit, each needs to be individually manipulatable. flex rows
        @for each field 
          <divField>data</divField> //configuration data, content may need to be called out through a style. 
        next field
      </divUnit>
    next unit
    <buttons /> //one set per selectable option
  </divOption>
</divContainer>


Make sense?
Was This Post Helpful? 0
  • +
  • -

#13 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3215
  • View blog
  • Posts: 12,098
  • Joined: 03-December 12

Re: .each(function()) - operating on each element

Posted 05 September 2014 - 07:27 PM

This is one of those cases where a table is acceptable to use.
Was This Post Helpful? 0
  • +
  • -

#14 depricated   User is offline

  • Nero


Reputation: 2532
  • View blog
  • Posts: 6,273
  • Joined: 13-September 08

Re: .each(function()) - operating on each element

Posted 06 September 2014 - 12:15 AM

except tables must render in rows, and I want to render in columns. Of course, if you have a suggestion on how I can add each Unit as a column I'm more than excited to hear it. I didn't see a way to do it with Tables or the CSS table specifications.

We expect people to only have 5-6 options on screen at a time. Each option can have any number of units (we expect 1-3 for most people) and any number of fields. So I want the layout to be something like...

Attached Image

Since I won't have a static number of columns, tables aren't feasible because I can't just add columns on the fly. Or if there is a way to do it with tables, I don't know it and my google-fu hasn't been strong enough to identify it.

sit in awe of my mspaint skills by the way

oh - and the point here, is that on deletion it needs to redraw the table like so;

Attached Image

and our team requesting this is talking about having upwards of 98 config items, thus why I want it in columns instead of rows. 98 columns for 5 rows would suck to peruse, while 98 rows in 5 columns feels much more natural.

This post has been edited by depricated: 06 September 2014 - 12:15 AM

Was This Post Helpful? 0
  • +
  • -

#15 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3215
  • View blog
  • Posts: 12,098
  • Joined: 03-December 12

Re: .each(function()) - operating on each element

Posted 06 September 2014 - 05:12 AM

I recede that statement! This goes back to the previous question you had. I was picturing

Name. |user. |edit |. delete

Not those column names but, something in that flow. Visuals change assumptions after all.

This post has been edited by astonecipher: 06 September 2014 - 05:14 AM

Was This Post Helpful? 0
  • +
  • -
  • (2 Pages)
  • +
  • 1
  • 2