Access parent element by variable using jquery - javascript

var _div = $("<div id='ds-tree-expand'/>").appendTo( "#ds-subject-tree" );
var _cur_token = "susmita";
var _next_token = "sudipta";
for(var i=0; i<5; i++){
var _1st_level = $( "<p id='acc_trigger' class='active collapsed'>" + _cur_token + "</p>" ).appendTo(_div);
var _2nd_level = $( "<p id='2nd_trigger' class='active collapsed'>" + _next_token + "</p>" ).appendTo(_1st_level);
}
var _2nd_ch = _div.children().children();
Now I want to access the parent of each _2nd_ch element.
I have tried:
$(_2nd_ch[1]).parent();
This isn't working. How can I access the parent of each item of the _2nd_ch array?

See this might helpful to you. http://jsfiddle.net/z8a0234b/ You can access any node using _nth.
var _div = $("<div id='ds-tree-expand'/>").appendTo( "#ds-subject-tree" );
var _cur_token = "Parent";
var _next_token = "Child";
for(var i=0; i<5; i++){
var _1st_level = $( "<p id='acc_trigger' class='active collapsed'>" + _cur_token + " "+ i +"</p>" ).appendTo(_div);
var _2nd_level = $( "<p id='2nd_trigger' class='active collapsed'>" + _next_token + " "+ i +"</p>" ).appendTo(_1st_level);
}
var _nth = 2;/*2dn node, for Parent 1*/
var _nth_parent = $("#ds-tree-expand > #acc_trigger:nth-child("+_nth+")").html();
_nth_parent = _nth_parent.split("<p"); _nth_parent = _nth_parent[0]; /*filter to trace only words no tag*/
var _nth_child = $("#ds-tree-expand > #acc_trigger:nth-child("+_nth+") > p").html();
alert(_nth_parent +" "+ _nth_child);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="ds-subject-tree"></div>

Related

Why does my code only add "null" to my shopping lists?

I think the intention is clear: Either you press one button or the other to add the item you typed into the input-field to one or the other shopping list.
However, no matter what or if I write something at all, if I press one of the buttons, it will just add "null" to the list.
Why is that?
function sortItem1() {
document.getElementById("addToMarket").addEventListener("click", addToMarketList);
}
function sortItem2() {
document.getElementById("addToOnline").addEventListener("click", addToOnlineList);
}
var gottaBuy = document.getElementById("item");
var listForMarket = " ";
var listForOnlineShop = " ";
function addToMarketList() {
listForMarket = listForMarket + "<li>" + gottaBuy + "</li>";
document.getElementById("marketList").innerHTML = listForMarket;
document.getElementById("item").value = " ";
}
function addToOnlineList() {
listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy + "</li>"
document.getElementById("onlineList").innerHTML = listForOnlineShop;
document.getElementById("item").value = " ";
}
window.addEventListener("load", sortItem1);
window.addEventListener("load", sortItem2);
<h1>What would you like to add?</h1>
<input type="text" id="item" />
<button type="button" id="addToMarket">Markt</button>
<button type="button" id="addToOnline">Online</button>
<h2>Buy at a store:</h2>
<ul id="marketList"></ul>
<h2>Buy online:</h2>
<ul id="onlineList"></ul>
The line var gottaBuy = document.getElementById("item") just assigns the html tag of the input to the variable.
What you want to retrieve is the value of the input and assigning it based on the button clicked. You can do that by assigning a separate variable within each button handlers and appending .value to get the input value like this:
function addToMarketList() {
var gottaBuy = document.getElementById("item").value;
listForMarket = listForMarket + "<li>" + gottaBuy + "</li>";
document.getElementById("marketList").innerHTML = listForMarket;
document.getElementById("item").value = " ";
}
function addToOnlineList() {
var gottaBuy = document.getElementById("item").value;
listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy + "</li>"
document.getElementById("onlineList").innerHTML = listForOnlineShop;
document.getElementById("item").value = " ";
}
jsFiddle: https://jsfiddle.net/AndrewL64/e9t0rszh/1/
You could select the element from inside the click handlers, so you are sure it is already loaded.
And you also most likely want to add the actual value and not the element itself.
function addToMarketList() {
var gottaBuy = document.getElementById("item");
listForMarket = listForMarket + "<li>" + gottaBuy.value + "</li>";
document.getElementById("marketList").innerHTML = listForMarket;
document.getElementById("item").value = " ";
}
function addToOnlineList() {
var gottaBuy = document.getElementById("item");
listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy.value + "</li>"
document.getElementById("onlineList").innerHTML = listForOnlineShop;
document.getElementById("item").value = " ";
}

JavaScript: Remove Double Quotes - JSON.Stringify()

After using he JSON.stringify() method in JavaScript to allow JSON data render in the browser it outputs double quotations " " at either end of the property rendered in the browser - any idea how to resolve this?
Here is my code -
<li class="divider">Brown Eyes</li>
<div id="output1"></div>
<li class="divider">Green Eyes</li>
<div id="output2"></div>
<script>
var myContainer = "";
var a = new XMLHttpRequest();
a.open("GET", "https://api.myjson.com/bins/1dwnm", true);
a.onreadystatechange = function () {
console.log(a);
if (a.readyState == 4) {
var obj = JSON.parse(a.responseText);
for (i = 0; i < obj.length; i++) {
if (obj[i].eyeColor == 'brown') {
var myContainer = "<ul class='list'><li>" + obj[i].name.first + " " + obj[i].name.last + " - " + obj[i].eyeColor + "</li></ul>";
var myContainer = JSON.stringify(myContainer);
document.getElementById('output1').innerHTML += myContainer;
}
if (obj[i].eyeColor == 'green') {
var myContainer = "<ul class='list'><li>" + obj[i].name.first + " " + obj[i].name.last + " - " + obj[i].eyeColor + "</li></ul>";
var myContainer = JSON.stringify(myContainer);
document.getElementById('output2').innerHTML += myContainer;
}
}
}
}
a.send();
</script>
Because "<ul class='list'><li>Faye Garrett - brown</li></ul>" is not a valid JSON string.
Uncomment your stringify lines and it works.

Issue with Prototype in JS

For my class I needed to create a constructor, object, and prototype. Unfortunately I cannot get the prototype to work and was wondering if someone could help me understand how to make a prototype to correctly calculate the price of my pizza object. Before I had to add an object and prototype it was working fine, but to meet the assignment guidelines I was asked to go back and make a prototype, which is confusing me greatly. Any help would be appreciated.
//business logic
function Pizza(size, sauce, cheese, meat1, meat2, veggie1, veggie2) {
this.size = size;
this.sauce = sauce;
this.cheese = cheese;
this.meat1 = meat1;
this.meat2 = meat2;
this.veggie1 = veggie1;
this.veggie2 = veggie2;
}
Pizza.prototype.pizzaPrice = function() {
return pizzaPrice = inputtedSize + inputtedSauce + inputtedCheese + inputtedMeatOne + inputtedMeattwo + inputtedVeggieOne + inputtedVeggieTwo + 0;
}
//user interface logic
$(document).ready(function(){
$("form").submit(function(event) {
event.preventDefault();
$("form").fadeOut();
var inputtedSize = parseInt($("#size").val());
var inputtedSauce = parseInt($("#sauce").val());
var inputtedCheese = parseInt($("#cheese").val());
var inputtedMeatOne = parseInt($("#meat1").val());
var inputtedMeattwo = parseInt($("#meat2").val());
var inputtedVeggieOne = parseInt($("#veggie1").val());
var inputtedVeggieTwo = parseInt($("#veggie2").val());
var sizeChoice = $( "#size option:selected" ).text();
var sauceChoice = $( "#sauce option:selected" ).text();
var cheeseChoice = $( "#cheese option:selected" ).text();
var meatChoiceOne = $( "#meat1 option:selected" ).text();
var meatChoiceTwo = $( "#meat2 option:selected" ).text();
var veggieChoiceOne = $( "#veggie1 option:selected" ).text();
var veggieChoiceTwo = $( "#veggie2 option:selected" ).text();
var pizza = Pizza();
var newPizza = (inputtedSize + inputtedSauce + inputtedCheese + inputtedMeatOne + inputtedMeattwo + inputtedVeggieOne + inputtedVeggieTwo);
Pizza.pizzaPrice(newPizza);
$("#total").fadeIn();
$(".total").text(" " + "$" + newPizza);
$(".size").text(" " + sizeChoice);
$(".sauce").text(" " + sauceChoice);
$(".cheese").text(" " + cheeseChoice);
$(".meat1").text(" " + meatChoiceOne);
$(".meat2").text(" " + meatChoiceTwo);
$(".veggie1").text(" " + veggieChoiceOne);
$(".veggie2").text(" " + veggieChoiceTwo);
});
});
var pizza = Pizza(); //undefined
var pizza = new Pizza() //your obj
i am new, but try this.
First of all, you're instantiating your object incorrectly. You must prefix new object instances with the self explanatory new operator.
Secondly, you reference instance values with this. In an prototype function, you can access instance variables by prefixing the variable with this. Doing this.size = size in the constructor will yield the value you passed to the constructor anytime you call this.size. Therefore your functions should reference those values like so instead of the variable which you're setting the input val from.
Here's how your code should look:
function Pizza(size, sauce, cheese, meat1, meat2, veggie1, veggie2) {
this.size = size;
this.sauce = sauce;
this.cheese = cheese;
this.meat1 = meat1;
this.meat2 = meat2;
this.veggie1 = veggie1;
this.veggie2 = veggie2;
}
Pizza.prototype.price = function() {
return this.size +
this.sauce +
this.cheese +
this.meat1 +
this.meat2 +
this.veggie1 +
this.veggie2 + 0;
}
var pizza = new Pizza(1, 1, 2, 1, 2, 3, 1);
console.log(pizza) // Pizza instance
console.log(pizza.price()) // returns computed instance values
console.log(pizza.sauce) // access instance value
In your case, you would use the above example like so:
$(document).ready(function() {
$("form").submit(function(event) {
event.preventDefault();
$("form").fadeOut();
var inputtedSize = parseInt($("#size").val());
var inputtedSauce = parseInt($("#sauce").val());
var inputtedCheese = parseInt($("#cheese").val());
var inputtedMeatOne = parseInt($("#meat1").val());
var inputtedMeattwo = parseInt($("#meat2").val());
var inputtedVeggieOne = parseInt($("#veggie1").val());
var inputtedVeggieTwo = parseInt($("#veggie2").val());
var sizeChoice = $("#size option:selected").text();
var sauceChoice = $("#sauce option:selected").text();
var cheeseChoice = $("#cheese option:selected").text();
var meatChoiceOne = $("#meat1 option:selected").text();
var meatChoiceTwo = $("#meat2 option:selected").text();
var veggieChoiceOne = $("#veggie1 option:selected").text();
var veggieChoiceTwo = $("#veggie2 option:selected").text();
var pizza = new Pizza(inputtedSize, inputtedSauce, inputtedCheese, inputtedMeatOne, inputtedMeattwo, inputtedVeggieOne, inputtedVeggieTwo);
$("#total").fadeIn();
$(".total").text(" " + "$" + pizza.price());
$(".size").text(" " + pizza.size);
$(".sauce").text(" " + pizza.sauce);
$(".cheese").text(" " + pizza.cheese);
$(".meat1").text(" " + pizza.meat1);
$(".meat2").text(" " + pizza.meat2);
$(".veggie1").text(" " + pizza.veggie1);
$(".veggie2").text(" " + pizza.veggie1);
});
});

I need Javascript syntax and logic advice

I have a two part question. The first is that I tried to replace all of my document.write with innerHTML and now nothing generates on the page correctly. The second part of my question is that I can't figure out the logic on my toggleCurrent function so that I can hide show the currently displayed view. example - if the thumbnail view is visible I want to hide/show or if the full view is visible I want to hide/show that. http://jsfiddle.net/5M3k7/
//Creating generic Object
function Person(name,age,biog,thumb,char,bg,cider) {
this.fullName = name;
this.age = age;
this.biog = biog;
this.thumb = thumb;
this.char = char;
this.bg = bg;
this.cider = cider;
}
//Creating new Objects
var jay = new Person ("Jay Jones",24,"Story","img","guy","bg","Fleet",true);
var jai = new Person ("Jai Janes",23,"Story","img","gal","bg","Sleet",true);
var dan = new Person ("Dan Dones",19,"Story","img","guy","bg","Leet",true);
var den = new Person ("Den Danes",49,"Story","img","guy","bg","Treat",true);
var dun = new Person ("Dun Dunes",20,"Story","img","guy","bg","Meet",true);
var vim = new Person ("Vim Vanes",22,"Story","img","guy","bg","Meat",true);
//Defining arrays
var characters = [jay, jai, dan, den, dun, vim];
//For loop goes though character array and prints it out.
var thumbs = function() {
var full = document.getElementById('full');
var cLength = characters.length;
for (var i = 0; i < cLength; i++){
full.innerHTML = '<div class="wrap"><div class="cont">' + "Name: " + characters[i].fullName + '<br/>' + 'Age: ' + characters[i].age + '<br/>' + 'Cider: ' + characters[i].cider + '</div></div>';
}
return;
};
var full = function() {
var thumb = document.getElementById('fullthumb');
var cLength = characters.length;
for (var i = 0; i < cLength; i++){
thumb.innerHTML = '<div class="fullwrap"><div class="bg"><div class="fullcont">Name: '
+ characters[i].fullName + '<br/> Age:' + characters[i].age + '<br/>Cider:' + characters[i].cider + '<div class="char"></div></div></div></div>';
}
return;
};
//Toggle Function
function toggleMenuDiv() {
var full = document.getElementById('full');
var thumb = document.getElementById('fullthumb');
var butt = document.getElementById('button');
if (full.style.display == 'none') {
full.style.display = 'block';
thumb.style.display = 'none';
butt.innerHTML = 'THUMB VIEW<span class="arrow-e"></span>';
}
else {
full.style.display = 'none';
thumb.style.display = 'block';
butt.innerHTML = 'FULL VIEW<span class="arrow-e"></span>';
}
}
//Toggle Function
function toggleCurrent() {
var chng = document.getElementById('change');
var thumb = document.getElementById('fullthumb');
var full = document.getElementById('full');
while (full.style.display == 'none')
{
if(thumb.style.display == 'block') {
chng.innerHTML = 'HIDE<span class="arrow-n"></span>';
}else{
thumb.style.display = 'none';
chng.innerHTML = 'SHOW<span class="arrow-s"></span>';
}
}
}
Because you keep overriding the last thing entered in.
full.innerHTML = '<div class="wrap"><div class="cont">' + "Name: " + characters[i].fullName + '<br/>' + 'Age: ' + characters[i].age + '<br/>' + 'Cider: ' + characters[i].cider + '</div></div>';
You are need to append to the innerHTML
full.innerHTML = full.innerHTML + '<div class="...

javascript inline code link generating chrome extension

I'm trying to make an extension for chrome that grabs data from a website and I'm having trouble making the links clickable. I CAN NOT use javascript inside the link (ex: href="javascript:myfunction(param);")
I need to create a div for each title, then create a onclick function that handles the div's innerhtml, and I can't get it to work.
here is my code so far:
document.addEventListener('DOMContentLoaded', function () {
$().ready(function () {
var url = 'http://somewebsite';
$.get(url, function (data) {
data = data.split("<tr name=\"hover\">");
var name;
var link;
var count = data.length;
count++;
for(var i = 1; i < data.length; i++){
data[i] = data[i].replace("<br>","<br />");
data[i] = data[i].replace("class=\"thread_link\"", "");
data[i] = data[i].replace("<td class=\"forum_thread_post\" align=\"center\">0</td>","");
data[i] = data[i].replace("<td class=\"forum_thread_post\">","");
data[i] = data[i].replace("</td>","");
data[i] = data[i].replace('<td class="forum_thread_post" align="center">0</td>','');
if(i != data.length-1){
data[i] = data[i].replace("<a href=\"", "");
data[i] = data[i].replace("</a>", "");
data[i] = data[i].split("\" >");
data[i][1] = data[i][1].split("<");
document.write('<div id="' + data[i][1][0] + '">' + data[i][1][0] + data[i][0] + "</div><br /><br />");
}else{
data[i] = data[i].split("</table>")[0];
data[i] = data[i].replace("<a href=\"", "");
data[i] = data[i].replace("</a>", "");
data[i] = data[i].split("\" >");
data[i][1] = data[i][1].split("<");
document.write('<div id="' + data[i][1][0] + '">' + data[i][1][0] + data[i][0] + "</div>");
}
}
//document.body.innerHTML = '';
//console.log(data);
});
});
});
document.write('</script>');
function getshow(url){
alert(url);
document.body.innerHTML = '';
$.get("http://somewebsite" + url, function (dat) {
document.write(dat);
});
}

Categories