Counting Items Similiar Name

[bluewalrus]

Is there a way to count all the ids on a page that contain a certain text? Also is there a way to change the id of an element for example a div?

For example I have:

<div id="order_1" style="position:relative; height:inherit;">

These div's are generated dynamically so I know I will always have one but don't know how many will be on the page at once.
I was thinking to search for <div id="order_\d+" and count all the results with the length but I don't know where to use that.

I'm also moving these divs around with jquery's animate and would like to rename them so the content is the only thing that really moves. I can post a more specific example if needed. Thanks.

[jscheuer1]

In jQuery there is:

http://api.jquery.com/attribute-starts-with-selector/

You can use that like:

$('div[id^=order_]')

Doing:

var numOrders = $('div[id^=order_]').size();

will tell you how many there are. Once you get a reference to a particular one of these you may change its id by (if using it as a DOM element):

el.id = 'whatever';

If it's a jQuery object:

el.attr('id', 'whatever');

[bluewalrus]

I think I mixed something up in here but can't seem to figure out what it is. I tried using firebugs console to view the values but they looked correct to me.

function down (arrow){
	var numOrders = $('div[id^=order_]').size();
	if (arrow == numOrders) {
		return;
	}
	var id_name = "#order_" + arrow;
	var  math_move = arrow + 1;
	var inverse_id_name = "#order_" + math_move;
	$(id_name).animate({"top": "+=30px"}, "slow");
	$(inverse_id_name).animate({"top": "-=30px"}, "slow");
	var new_id = id_name.replace("#", "");
	var new_id2 = inverse_id_name.replace("#", "");
	$(id_name).attr('id',new_id + "delay");
	$(inverse_id_name).attr('id',new_id2);
	$("#"+ new_id + "delay").attr('id',new_id);
}
function up (arrow){
	var numOrders = $('div[id^=order_]').size();
	var check = arrow - 1;
	if (check <= numOrders) {
		return;
	}
	var id_name = "#order_" + arrow;
	var  math_move = arrow - 1;
	var inverse_id_name = "#order_" + math_move;
	$(id_name).animate({"top": "-=30px"}, "slow");
	$(inverse_id_name).animate({"top": "+=30px"}, "slow");
	var new_id = id_name.replace("#", "");
	var new_id2 = inverse_id_name.replace("#", "");
	$(id_name).attr('id',new_id + "delay");
	$(inverse_id_name).attr('id',new_id2);
	$("#"+ new_id + "delay").attr('id',new_id);
}

The buttons code is

<p class="author_up"><a href="javascript:move();" onclick="up(arrow=1); return false;"><img src="arrow_up.jpg" alt="up" /></a></p>
				<p class="author_down"><a href="javascript:move();" onclick="down(arrow=1); return false;"><img src="arrow_down.jpg" alt="down" /></a></p>

The are generated dynamically as well as the content being moved. Thanks for any ideas you can offer.

[jscheuer1]

Mmm . . . You're getting into a bad habit:

onclick="down(arrow=1); . . .

In javascript what this does is create or modify a global variable named arrow, while at the same time passing the value 1 to the down (arrow) function. In your previous code (from our last thread together), where you did something like this, you needed the global variable, at least the way the rest of your code was constructed. And it was an object. So it was the same object as passed locally to the function. Here it's a number. So it's two distinct variables, one global and the other local, neither of which interact with the other.

As currently constructed, the code in your post doesn't appear to use the global arrow variable.

Next item - It would be easier if I had a link to the page where this code is being used, but here, if you click the up button:

function up (arrow){ // arrow is always 1
	var numOrders = $('div[id^=order_]').size(); // regardless of how we got here, this is always 0 or more
	var check = arrow - 1; // check is always 0
	if (check <= numOrders) { // this is always true
		return; // so processing always stops here
	}

In the down function things are a bit better. If invoked by clicking the down button, as long as there are 0 or more than 1 div[id^=order_] processing will continue to:

	var id_name = "#order_" + arrow; // id_name is always #order_1
	var  math_move = arrow + 1; // math_move is always 2
	var inverse_id_name = "#order_" + math_move; // inverse_id_name is always #order_2
	$(id_name).animate({"top": "+=30px"}, "slow"); // we animate these if they exist
	$(inverse_id_name).animate({"top": "-=30px"}, "slow");
	var new_id = id_name.replace("#", ""); // new_id is always order_1
	var new_id2 = inverse_id_name.replace("#", ""); // new_id2 is always order_2
	$(id_name).attr('id',new_id + "delay"); // if it exists, the first element with the id order_1 now has the id of order_1delay
	$(inverse_id_name).attr('id',new_id2); // similarly for element with id order_2, is now id order_2delay
	$("#"+ new_id + "delay").attr('id',new_id); // element, if it existed that we just changed to id order_1delay is now id order_1 again

Note: Elements with an id of order_1delay or order_2delay fit the criteria of [id^=order_].

[bluewalrus]

Not sure I understand. The previous link should still be working.

So the 1 is being passed in so it knows which container to move. The arrows are staying in the same place. My example wasn't a very good one because as 1 when there is only 1 it should do nothing. This full code is related with PHP, it basically just increases the arrow count so it knows which container to move.

<?php
$author_count = $_POST['get_count'];
$author_count++;
?>
            <div id="author_id_###">
                <p class="author_up"><a href="javascript:move();" onclick="up(arrow=<?php echo $author_count;?>); return false;"><img src="arrow_up.jpg" alt="up" /></a></p>
                <p class="author_down"><a href="javascript:move();" onclick="down(arrow=<?php echo $author_count;?>); return false;"><img src="arrow_down.jpg" alt="down" /></a></p>
                <div id="order_<?php echo $author_count;?>"  style="position:relative; height:inherit;">
                    <p class="author_name"><?php echo $_POST['firstname'] . " " . $_POST['lastname']?></p>
                <p class="author_email"><?php echo $_POST['email'];?></p>
                <p class="buttons">
                <a href="#">edit</a>
                <a href="#">delete</a></p>
            </div>
        </div>

[jscheuer1]

Not understanding is fine. We all start there. I'm still in the process of wrapping my head around this one.

What exactly don't you understand? And what's the "previous link"?

Anyways, having the value passed to the up and down functions by their activating link buttons being determined by PHP could perhaps take care of a lot. Either you didn't make that clear at first and/or I didn't get it. If it was all me, please accept my apologies.

Like before though, to really get at this, I need to see the page and know what to do to see the problem. This includes knowing what you want to happen as well as what, if anything, is happening instead.

You could always comment the code as I did, only using your own ideas as to what should be happening with each line. Use alerts and/or observation to see if your expectations are borne out.

That might help clarify the issue(s) enough to solve it or to make it clearer what specifically you want help on.



What I said about the habit of doing something like:

<a href="javascript:move();" onclick="down(arrow=1); return false;">

still stands. But it's just about good javascript coding practices. I don't think it's a factor in things not behaving as you want. And it may work out for you in the short term. In the long term you are just asking for problems. In this case the code doesn't appear to even use it.

You should get the same result from:

<a href="javascript:move();" onclick="down(1); return false;">

Or from:

<a href="javascript:move();" onclick="down(<?php echo $author_count;?>); return false;">

[bluewalrus]

I don't understand why the "down(arrow=1)" is a bad javascript coding.

I've gotten the conditionals to work, I think, but now need to change the element div names accordingly. When I look at the values in firebug they are what i expect but they don't set.

Is it also poor javascript practice to mix jquery with regular javascript (is there a phrasing for that as well?)?

Thanks for any help you can offer.

Code with functioning conditionals:

function down (arrow){
	var numOrders = $('div[id^=order_]').size();
	if (arrow == numOrders) {
		return;
	}
	var id_name = "#order_" + arrow;
	var  math_move = arrow + 1;
	var inverse_id_name = "#order_" + math_move;
	$(id_name).animate({"top": "+=30px"}, "slow");
	$(inverse_id_name).animate({"top": "-=30px"}, "slow");
	var new_id = id_name.replace("#", "");
	var new_id2 = inverse_id_name.replace("#", "");
	$(id_name).attr('id',new_id + "delay");
	$(inverse_id_name).attr('id',new_id2);
	$("#"+ new_id + "delay").attr('id',new_id);
}
function up (arrow){
	var numOrders = $('div[id^=order_]').size();
	var checkNum = numOrders- (numOrders - 1);
	if (arrow <= checkNum) {
		return;
	}
	var id_name = "#order_" + arrow;
	var  math_move = arrow - 1;
	var inverse_id_name = "#order_" + math_move;
	$(id_name).animate({"top": "-=30px"}, "slow");
	$(inverse_id_name).animate({"top": "+=30px"}, "slow");
	var new_id = id_name.replace("#", "");
	var new_id2 = inverse_id_name.replace("#", "");
	$(id_name).attr('id', new_id + "delay");
	$(inverse_id_name).attr('id', new_id2);
	$("#"+ new_id + "delay").attr('id', new_id);
}

[jscheuer1]

I'll comment on the specifics of the code later.

As for:

down(arrow=1)

to activate:

function down (arrow){

What arrow=1 in there does is create or alter a global variable named arrow. In this case this is an undeclared global variable. It's the same thing as doing (outside of any function):

arrow=1;
down(arrow);

So it will conflict in some browsers with an element (if any) with an id of arrow. It will also overwrite the value of any other global variable named arrow. You don't need or use this global variable in your code.

It also evaluates into a value of 1. To see both concepts try:

alert(arrow=1); //alerts 1 and sets an undeclared global arrow to 1
alert(arrow); //alerts 1, the value of the undeclared global arrow

In so doing it passes that value as the first argument to the function down (arrow){, which also happens to be named arrow, but is local to the function down (arrow){. That local variable is needed and used. To further understand these concepts do:

function down(arrow){
	arrow = arrow + 1;
	alert(arrow);
}
down(arrow=1);
alert(arrow);

You are dealing with two arrow variables, one global and the other local. Changing the local one doesn't change the global one. And unless you invoke it again in the same way, changing the global one doesn't affect the local one.


As for mixing regular javascript with jQuery, jQuery is regular javascript. It's a library of routines that do specific things. Do:

alert($);

and it will alert:

function (a, b) {
return new (c.fn.init)(a, b);
}

What the new keyword does is create an instance, an instance where the keyword this will refer to the instance. It's a little more complicated than that, but still just javascript. The key to 'mixing' them is to know what this is in any particular case where you use it in your code.

[jscheuer1]

More on 'mixing' jQuery and ordinary javascript -

In my previous post I mentioned the importance of knowing what this refers to. Another consideration is knowing when a jQuery or an ordinary javascript method might be more appropriate. These sorts of things come with experience. Generally though you can convert an object to using jQuery methods from ordinary ones and visa versa:

var obj = document.getElementById('test'); // ordinary html element object
obj = $(obj); // now it's a jQuery object
obj = obj.get(0); // it's an ordinary html element object again

The conversion back to ordinary only works equivalently if the jQuery object had one and only one member. If it has more than one, obj will now be just the first member from the jQuery object. If it had no members, the ordinary object will now be null.

Frequent use of these types of conversions usually aren't required. If your code relies upon frequent use of them, it's probably not as efficient as it could be. jQuery itself routinely performs the conversion to ordinary though in this and many similar constructs:

var objs = $('div[id^=order_]');
objs.click(function(){
	alert(this.innerHTML);
}

this in this case refers to the ordinary html element object that was clicked.

And there are at least several jQuery methods that can accept either a jQuery object or an ordinary html element object as an argument.

It's generally best to determine what method you want to use and to read its api reference from:

http://api.jquery.com/

to determine what it will accept as arguments. Weigh this against what you have available to feed to it, and decide how to proceed from there.

About the code in your post. I still need to see it in action. Try setting up a demo that illustrates the problem. It need not include all that much, in fact it's better if there are no images or ajax involved, just the moving about of elements that you want to accomplish.

[bluewalrus]

Oh, thanks I think I get what you mean about the local and global now.

I've also made up a simpler version of the page here http://174.120.151.156/~crazychr/move.php