using a for loop to identify html .classes (jQuery) - javascript

I'm using simplepie to pull in two rss feeds. Using a PHP foreach loop, I then echo the information each feed post contains in the class .story_overview and adding a .pin class for each article. I'm using jQuery within the PHP foreach to hide.story_overview and add a unique identifying number to the end of the .story_overview and respective .pin class and this is working:
<script>
$('.story_overview').hide();
$('.pin').attr('class','pin' + i);
$('.story_overview').attr('class','story_overview' + i);
i++;
</script>
I'm trying to reach the desired outcome of hovering over a .pin revealing the respective .story_overview (so .pin1 would reveal .story_overview1). I'm currently trying to do this with a JavaScript for loop but it refuses to work:
<script>
for (x = 0; x <= i; x++){
$('.pin'+ x.toString()).mouseover(function(){
$('.story_overview' + x.toString()).show();
});
$('.pin'+ x.toString()).mouseout(function(){
$('.story_overview' + x.toString()).hide();
});
};
</script>
I have tested all the jQuery commands by trying the same code but with the identifying numbers at the end of the class names (rather than x.toString) and placing the code outside of the for loop, and that all works.
Any help what so ever would be greatly appreciated! Thanks in advance.

You can simply do this:
$('.pin').mouseover(function(){
$('.story_overview').eq($(this).index()).show();
}).mouseout(function(){
$('.story_overview').eq($(this).index()).hide();
});
You can achieve the desired output by using the .eq() method with .index() to get the index of the hovered element.
Or you might like this:
$('.pin').mouseover(function(){
$('.story_overview'+$(this).index()).show();
}).mouseout(function(){
$('.story_overview'+$(this).index()).hide();
});

Related

jquery's version of ".innerHTML +=" for an array html insertion

I have read through some questions pertaining specifically to innerHTML= vs .html(). But yet have crossed anything to add into the variable like innerHTML+= to the html(). Is there a jquery event that can add more than just one html string? Or shall I rely on innerHTML+= for now?
The coding that best describes the current issue:
var pushy = ['blah', 'blaH', 'blaah'];
for(i=0;i<pushy.length;i++){
document.getElementById("demo").innerHTML +=
"<div>Im one heck of a div and more!</div>" + pushy[i];}
vs
$("#demo").html("<div>Im one heck of a div and more!</div>" + pushy[i]);
//where it will return the last array value and not the first value
Although the first is the go to and failsafe. But wanted to see the exact equivalent than just pop the last value of the array. Here is my innerHTML+= vs .html() for example. The question is not pertaining to the innerHTML = but rather the += thereof.
You are probably looking for .append()
$('element').append('SOME HTML');
You example (updated)
https://jsfiddle.net/4pqegj5f/9/
are you looking for
$("#demo").append("<div>Im one heck of a div and more!</div>" + pushy[i]);
Using .append should get you the desired result. See below:
var pushy = ['blah', 'blaH', 'blaah'];
for(i=0;i<pushy.length;i++){
$("#demo").append("<div>Im one heck of a div and more!</div>" + pushy[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo"></div>

Way to differentiate multiple divs with same class or ID when Javascript is run

I am generating QR codes for [id] on an invoice.
Right now I have a javascript at each place where there is going to be a qr code to run, and generate the code.
<script type="text/javascript">
function makeCode (data,width) {
var qrcode = new QRCode(document.getElementById(data), {
width : width,
height : width
});
var length = (data).length;
if (length===10) {qrcode.makeCode("10" + data);}
else {qrcode.makeCode(data);}
}
</script>
<div id="[id]"></div><script>makeCode("[id]","50")</script>
The reason I have to use [id] as the "id" of the div is that it's the only piece of dynamic content I get for the item.
The issue is that when I have more than one item with the same [id] the javascript is of course stacking up all the QR codes into the first <div> with that id.
Is there a way to have the javascript know that it was run from the third DIV (as an example) and then put the code into the third DIV, instead of the first.
I know that you're not supposed to have more than one div with the same ID element. That's part of the issue, I am trying to make them unique but I dont know how.
I have added a jfiddle so you can see the issue a little more clearly.
https://jsfiddle.net/nmteaco/x57o9pko/3/
As mentioned, few things in your current website logic needs to adjust to more dynamic.
First, should have one table which represent shopping cart and within that cart, you can have multiple rows of items for QRcode generation. And each same id can have a indexing flag 1..2..3..
I have made a demo of how your issue can be fixed with change of your html structure.
Demo
Let me know what you think.
I dont know how this worked...
However adding a class to the products of "product" and posting the following code at the end of the document worked.
$.each($(".product"), function(index, value){
var num = index + 1;
$(value).attr("id","qrcode"+ num);
});
It makes each id unique after it runs. However somehow the qr javascript still knows which div to put the correct image into.
Change your html to this:
<div data-content="qr-content" data-value="Your qr content"></div>
<script>
var elements = document.queryselectorall('[data-content="qr-content"]');
for (var i=0; i<elements.length; i++)
makeCode(elements[i].getAttribute('data-value'), 50);
}
</script>

Change Text of Array Of links in jQuery

For my school's website they have a dropdown list of courses that you're currently enrolled in on the home page. However, if you see it, it is cluttered full of letters that many people might not want to see.
I already know how I'm going to do this. I'm going to use jQuery to select each list item:
var links = $(".d2l-datalist li .d2l-course-selector-item .d2l-left .vui-link");
This returns an array of <a> elements in text form.
Using links.text("Boo!"); I can set the text of all of them to "Boo!", but I want to change each one individually, using a for/in loop to itterate through each <a> and change the text depending on what the value of the href is.
However, whenever I do this, since the items in the array are strings, I cannot do anything to them with jQuery.
Any help with this is appreciated :)
Here's my code so far (running from a $.getScript() from a JS bookmarklet):
var links = $(".d2l-datalist li .d2l-course-selector-item .d2l-left .vui-link");
//links.text("Boo!");
var count = 1;
for (var link in links) {
link.text("Boo #" + count);
count += 1;
}
Relevant markup: http://hastebin.com/ulijefiqaz.scala
You can use the jQuery .each iterator function.
var links = $(".d2l-datalist li .d2l-course-selector-item .d2l-left .vui-link");
var count = 1;
links.each(function() {
$(this).text("Boo #" + count++);
});

How to increase a number for the same class?

I would like to display an increased number (starting with 1 and ending with 47) for each class called quiz_image.
The HTML looks kind of like this:
<div class="quiz_image">
Content here
</div>
<div class="quiz_image">
Content here
</div>
<div class="quiz_image">
Content here
</div>
In order to display the number before the class quiz_image, I have tried it like this:
var i = 1;
$('.quiz_image').before(i);
i++;
In my code above the number will not increase, since there is probably a loop needed and I have no idea how to start a loop in this case. I hope somebody can help out on this.
When you use jQuery to get a selector it will return an array of elements. So you'll want to loop through them. I would suggest with something like the jQuery .each() function, which natively provides you with a 0 based index, you could try something like:
$('.quiz_image').each(function(i){
$(this).before(i + 1); // add one so we dont start at 0
});
Loopin all quiz_image and use their index numbers
$('.quiz_image').each(function(index){
$(this).before(index+1);
});
Working Demo
before function in jQuery sets the content before the specified element , and it also accepts the function so we can do it like the below example.
index function Search for a given element from among the matched elements
$('.quiz_image').before(function(){
return $('.quiz_image').index(this)+1
});
Why do you want to change the class for each image?
Rather give each one an ID.
<div class="quiz_image"></div>
<script>
counter = 0;
var quiz_id = $(".quiz_image").prop("id");
$(".quiz_image").each(function(){
counter++;
quiz_id = quiz_id + counter
$(".quiz_image").prop("id",quiz_id);
});

jQuery append li, unexpected token ILLEGAL

I am trying to append a new list item based on a condition using jquery. For reference the page is a Wordpress page and i have been able to implement serval jquery scripts using same format.
Here is the sample HTML.
<div class = "bag" id = "bag" style="width: 100%; padding: 0 0 0 5px; float: left;">
<ul id = "clubsli" name = "clubsli" class = "clubsli">
I dynamically create a li with "n" values and want to append a new li to the end of this list using JavaScript/jQuery script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function addClub() {
$roleint = 2613;
$count = $("#clubsli li").length - 1;
if ($roleint == 2613) {
if ($count < 100) {
$("#bag ul").append('<li>$roleinit</li>');
};
};
};
});
</script>
No matter what I do I get the following Unexpected token ILLEGAL error that seems to not like the "<" in the list element.
Here is the error I receive.
I've tried appending a non-li and can without fail and tried "appendTo" but get same error on the "<".
Your code is basically okay. Here's a working JSFiddle version of it, with the following problems or incompletenesses corrected:
$(document).ready(function () {
function addClub() {
$roleint = 2613;
$count = $("#clubsli li").length - 1;
if ($roleint == 2613) {
if ($count < 100) {
$("#bag ul").append('<li>' + $roleint + '</li>');
};
};
};
addClub();
});
You needed to use the string appending operator + in your appended string.
You'd typo'd $roleint as $roleinit in your append()
You'd declared the addClub() function, but not actually called it. I presume it was being called somewhere else in your code?
In addition, as Guido points out, it's quite odd to use variable names starting with $ in jQuery unless the variable is actually a jQuery object, so that makes your code read quite strangely.
I don't think any of this would have caused the error in your question, though, so perhaps there's something else going on that we can't see from your description?
Problem solved! Similar post on WordPress specific stackexchange shows how to edit functions.php so WP does not auto-insert page breaks.
https://wordpress.stackexchange.com/questions/101368/wordspress-add-p-into-my-javascripts
Thanks to those that helped clarify what was causing the problem for me. Gave me better idea on where to look.

Categories