7 Replies - 17787 Views - Last Post: 10 September 2011 - 01:43 AM

#1 hockey97   User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

How to grab all <a> tags texts inside a div?

Posted 05 September 2011 - 03:58 PM

Hi, how can you select all the texts inside a <a> tag in a div?

here is what I want to do. I got like 4 names...

here is an example.


<div>
<a>Apple</a>
<a>oranges</a>
<a>pineapple</a>
<a>Apple</a>
<a>oranges</a>
<a>Apple</a>
<a>oranges</a>
</div>



above I got tags showing fruit names some are repetitive.

here is what I want to do. I want to grab all the names.
I only want to grab the names only once.

Then I want to count how many names are in that list.

all these <a> tags gets appended to the div when a button is clicked.
so that is why I want to grab the names only once but then also count how many times it appears.

how would one do this? give either code or concept. I can write the code myself.

Just need help on the concept.

I was thinking to write a function that when the submit button is hit for a form. I would grab all these names once and then use the length function... but think this might count how many words or letters in each <a> tag. Yet, this isn't want I want. I want to count the tags that consists that one name. So I would have a result at the end in a number. Showing how many times it has been true or appears in that list of <a> tags.

Is This A Good Question/Topic? 0
  • +

Replies To: How to grab all <a> tags texts inside a div?

#2 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: How to grab all <a> tags texts inside a div?

Posted 05 September 2011 - 05:24 PM

I haven't tested this, but give it a go:
$("div > a")


This should select all <a> elements that are inside any div. Alternately, to narrow it down to a div with id of MyDivId, use this:
$("#MyDivId > p")


Was This Post Helpful? 0
  • +
  • -

#3 cupidvogel   User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: How to grab all <a> tags texts inside a div?

Posted 07 September 2011 - 08:17 AM

I never really understood what you mean. First you say that you wanna grab all the texts inside links such that those texts have appeared only once within a link. Then you say "I want to count the tags that consists that one name. So I would have a result at the end in a number. Showing how many times it has been true or appears in that list of <a> tags. " You also say "but then also count how many times it appears." This might be of some help:

function count(arr, string) {
 var count = 0;
 for (var i =0; i<arr.length;++i)
  if arr[i].toLowerCase() == string.toLowerCase()
   ++count;
 return count;
}
//Other code
var arr = [];
$("div a").each(function() {
 arr.push($(this).text());
});
var newarr = $.grep(arr, function(value, index) {
return count(arr, value) == 1;
});
alert(newarr.length);



There, the final arr array consists of only those words which appear once within a link, so its length is the number of links with unique content.

This post has been edited by cupidvogel: 07 September 2011 - 08:18 AM

Was This Post Helpful? 0
  • +
  • -

#4 hockey97   User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

Re: How to grab all <a> tags texts inside a div?

Posted 07 September 2011 - 04:08 PM

View Postcupidvogel, on 07 September 2011 - 09:17 AM, said:

I never really understood what you mean. First you say that you wanna grab all the texts inside links such that those texts have appeared only once within a link. Then you say "I want to count the tags that consists that one name. So I would have a result at the end in a number. Showing how many times it has been true or appears in that list of <a> tags. " You also say "but then also count how many times it appears." This might be of some help:

function count(arr, string) {
 var count = 0;
 for (var i =0; i<arr.length;++i)
  if arr[i].toLowerCase() == string.toLowerCase()
   ++count;
 return count;
}
//Other code
var arr = [];
$("div a").each(function() {
 arr.push($(this).text());
});
var newarr = $.grep(arr, function(value, index) {
return count(arr, value) == 1;
});
alert(newarr.length);



There, the final arr array consists of only those words which appear once within a link, so its length is the number of links with unique content.




My example is nothing but <a> tags inside a div. These tags gets appended to the div.

When a person selects from a drop down menu of these fruits and clicks submit it appends that fruit inside this div and displays the name and price.

What I am looking for is to generate an invoice or passing these to a paypal shopping cart.

So I need to look inside this div grab all the next of the fruits that are listed.

I just want to grab the text to only the ones that were at least listed once. I don't want to grab apple 4 times even though it's in the list 4 times.

I just want to grab the word apple once. Then count how many times apple appear inside this div.

So if it's 4 then I will put apples quantity is 4. then will display the total of the cost of all 4. so if it's $5 for each then 5 times 4 is $20 total.

this is what I want to do.
Was This Post Helpful? 0
  • +
  • -

#5 hockey97   User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

Re: How to grab all <a> tags texts inside a div?

Posted 09 September 2011 - 01:27 AM

Can't I do this task by just using jquery's .filter() function?

I just want to grab all the A tags inside that div, Then filter out the text. So that I would grab all that text only once. I don't need copies of it.

so if there is 5 apples 30 oranges and 1 pineapple.

I should be able to grab apples once same with oranges and pineapple.

so I won't grabe apples text 5 times or oranges text 30 times just once for each different name.

I then would later on want to count how many there are of those names. In other words we see apples appear 5 times. So I will count how many times we see apples and we would get the number 5.

I am trying to write a check method. So I can charge the client.

I just want to list the name once of the item. Then have how many copies of it displayed as a number.

that way I can just take the price of one then times it by how many they are buying. To get a total for that group of same items.

This is the goal. How would I do this via jquery? I was told to use the filter function.??
Was This Post Helpful? 0
  • +
  • -

#6 cupidvogel   User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: How to grab all <a> tags texts inside a div?

Posted 09 September 2011 - 05:04 AM

I want to be clear about what exactly do you need. Suppose you have a list of <a> tags like this:

<a>apple</a>
<a>orange</a>
<a>apple</a>
<a>banana</a>
<a>orange</a>
<a>orange</a>
<a>pineapple</a>
<a>apple</a>
<a>orange</a>
<a>orange</a>



Suppose the cost of apple is 1$, orange 2$, banana 3$ and pineapple 4$. Do you want output in a table with 3 columns, first containing the fruit, second -the number of times it occurs, and lastly, the total price for that fruit (price multiplied by number?)
Was This Post Helpful? 0
  • +
  • -

#7 hockey97   User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

Re: How to grab all <a> tags texts inside a div?

Posted 09 September 2011 - 04:02 PM

View Postcupidvogel, on 09 September 2011 - 06:04 AM, said:

I want to be clear about what exactly do you need. Suppose you have a list of <a> tags like this:

<a>apple</a>
<a>orange</a>
<a>apple</a>
<a>banana</a>
<a>orange</a>
<a>orange</a>
<a>pineapple</a>
<a>apple</a>
<a>orange</a>
<a>orange</a>



Suppose the cost of apple is 1$, orange 2$, banana 3$ and pineapple 4$. Do you want output in a table with 3 columns, first containing the fruit, second -the number of times it occurs, and lastly, the total price for that fruit (price multiplied by number?)



I want to display the items in a new div. The div will act like a pre-invoice. Showing the charges total. If the client is ok with it they click pay now button.


I don't want to output it in a table. Just make new <a> tags in a new div and have that div fade in.

let's use your example:

here is the code this be inside lets call this div 1 :

<a>apple</a>
<a>orange</a>
<a>apple</a>
<a>banana</a>
<a>orange</a>
<a>orange</a>
<a>pineapple</a>
<a>apple</a>
<a>orange</a>
<a>orange</a>



apple is 1$, orange 2$, banana 3$ and pineapple 4$

here be the output I want:

the div below we will call div 2. This be the output a pre-invoice. showing what the client
ordered we then show the total charges.
<div>
<a>Apples quantity:3  price:$3.00 </a><br>
<a>Oranges quantity:5  price:$10.00 </a><br>
<a>Banana quantity:1  price:$3.00 </a><br>
<a>Pineapple quantity:1  price:$4.00 </a><br><br><br>
<a>Total Amount Due : $20.00
</div>



the example of yours that I did above is static. Meaning I manually type that .

Yet, I want this to be dynamic.

div 1 is the div where when someone selects these items from a drop down menu
it appends an <a> tag with the name of the item selected and the price it cost.
So that div will list all items ordered even if it's the same item name. So for apples from your example since there is three apples ordered. You would see in div 1 3 individual <a> tags listed in that div.

In div 2 I want to create a invoice type format. Where in this div 1 list I want to grab the texts of the <a> tags. I am not thinking to name the <a> tags with the item name.

I just want to grab that name only once so for example your example with apples there are 3.

I just want to grab the name Apples from the <a> tag with Apples but only need to grab it once. Then count how many times the name apples appear in div 1 list. In your example this be 3.

That way in the pre-invoice it would show the client that they ordered apples 3 times. So if it's $1 dollar for just one apple it be a total of $3 for that apples order.

I just want to display the word apple once with the number of times that name occured in that list in div 1. This goes for any fruit ordered.

I just want to print the name of the item once and then have a space inbetween that word and then have a word like quantity followed by the number of times that item been ordered or selected. in our case it be how many times that name of the item appeared in that div 1 list.



To make things simple. What I have already made is a div 1 this div 1 will consist of dynamically appended items names and prices inside a <a> tag. This be inside div 1.

I want to create a new div we will call this div 2. This div will append <a> tags but this time it will look at div 1 and scan the list. It will grab the name of those items once for each original item name. So if apples appears once even if it appears 50 times I will grab the name only once. That way I will display it in div 2.

Div 2 is like a invoice... something that shows what the client is ordering. It's a sum up.

I hope this makes any sense. I don't want it in a table. Just list the item name selected by the customer. Only list the name once no copies. We will count how many same items of that item been selected and then diplay the number of times it been listed. that way we can tell the quickly that you are ordering 3 apples which will cost you $3.

it's a quick way to sum up the order they are placing. I won't manually type the names. The item names will be the name of the <a> tag. So I just need to grab that name only once per original item.
Was This Post Helpful? 0
  • +
  • -

#8 cupidvogel   User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: How to grab all <a> tags texts inside a div?

Posted 10 September 2011 - 01:43 AM

Assuming div1 is full and prepared as I showed below:

<div id = "1">
<a>apple</a>
<a>orange</a>
<a>apple</a>
<a>banana</a>
<a>orange</a>
<a>orange</a>
<a>pineapple</a>
<a>apple</a>
<a>orange</a>
<a>orange</a>
</div>



here's the code that will generate your required div2:

$(document).ready(function(){
function count(countarr, string) { //returns how many times an item appears in an array
 var count = 0;
 for (var z = 0; z < countarr.length; ++z)
  if (countarr[z].toLowerCase() == string.toLowerCase())
   ++count;
 return count;
}
var oldarr = []; //populate with all fruit names
$("div#1 a").each(function() {
 oldarr.push($(this).text());
});

var newarr = [];
function app(item) { //appends new item only
for (var i = 0; i < newarr.length; ++i)
if (newarr[i] == item)
break; //if match found it means that the item is already there, so it should not be appended
if (i == newarr.length) //checks to see whether the item is indeed new by running through the entire array
newarr.push(item);
}
$.each(oldarr, function(index,item) { //applies the app function on each item
app(item);
});
var fruitcount = [];
$.each(newarr, function(index,item) { //for each //distinct fruit in the newarr array, populate //fruitcount with its number of occurrences 
var y = count(oldarr, item);
fruitcount.push(y);
});
var fruitprice = [];
fruitprice['apple'] = 1;
fruitprice['orange'] = 2;
fruitprice['banana'] = 3;
fruitprice['pineapple'] = 4;
$("button").click(function() {
var html = "<div id = 'new'>";
for (var k=0;k<newarr.length;++k) {
 html += "<a>"+newarr[k]+" quantity: " +fruitcount[k]+ " price: $"+fruitcount[k]*fruitprice[newarr[k]]+"</a><br>";
}
html += "</div>";
$(html).appendTo($("body"));

});
});



Note that the newarr and fruitcount arrays are parallel, i.e. the newarr array consists of distinct fruit names, and the corresponding value in the fruitcount array is the number of times that fruit name is present. Whereas, the fruitprice array isn't parallel to these two, as we have no idea in which order will the newarr array consist of the distinct fruit names, since it is dependent on the way the fruit names are provided in the original div. Hence fruitprice uses an associative index.

This post has been edited by cupidvogel: 10 September 2011 - 01:58 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1