Add data-attribute to appended object src - javascript

I would like to append a link to multiple list-items that passes the data-attribute to the end of the URL. However I don't understand how to make the variable "storyId" hold a different value for each instance of .Story
<div id="InnerPage">
<ol>
<li class="Story" data-id="35213">Text for Link 1 </li>
<li class="Story" data-id="35204">Text for Link 2 </li>
</ol>
</div>
<script>
var storyId = this.getAttribute('data-id');
var sidebarURL = "'index.html?storyid=' + storyId"
var newA = document.createElement('a');
newA.setAttribute('href',sidebarURL);
newA.innerHTML = "Split View";
$('.Story').append([newA]);
</script>
Should result in:
<div id="InnerPage">
<ol>
<li class="Story" data-id="35213">Text for Link 1 Split View</li>
<li class="Story" data-id="35204">Text for Link 2 Split View</li>
</ol>
</div>
http://jsfiddle.net/s3wtsxw5/

You can do:
$("#InnerPage ol li").each(function() {
var id = $(this).data("id");
var link = "index.html?storyid=" + id;
$(this).append("<a href='" + link + "'>Split View</a>");
});

Related

function for adding new contacts won't work

I watched a youtube video about coding in vanilla javascript because I'm currently studying javascript. I wanted to add an "adder" for names that start with letter a.
I wrote a do1 function and I added div between all names that start with a. I don't know what's going on here to be host what's the problem. I'm currently moving from basics to intermediate level in javascript, I'm trying to practice my javascript skills in any possible way. function filter names was written by someone else. I don't have that much skills to do something like that.
So if you have any ideas on how should I practice js. If you have any websites or even tasks that could help me in learning javascript. would appreciate if you linked me any in comments section.
let filterInput = document.getElementById('filterInput');
filterInput.addEventListener('keyup', filterNames);
function filterNames() {
// Get value of input
let filterValue = document.getElementById('filterInput').value.toUpperCase();
// Get names ul
let ul = document.getElementById('names');
// Get lis from ul
let li = ul.querySelectorAll('li.collection-item');
// Loop through collection-item lis
for (let i = 0; i < li.length; i++) {
let a = li[i].getElementsByTagName('a')[0];
// If matched
if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}
function do1() {
var input1 = document.getElementById('ipt1').value;
var item = document.createTextNode(input1);
var li = document.createElement('li').className = "collection-header";
var a = document.createElement('a');
var child1 = li.appendChild(a);
var div = document.getElementById('div1');
div1.appendChild(item).innerHTML = item;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<div class="container">
<h1 class="center-align">
My Contacts
</h1>
<input type="text" id="filterInput" placeholder="Search names...">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>A</h5> <input type="box" id="ipt1"> <button onclick="do1();">`click me to add another contact`</button>
</li>
<div id="div1">
<li class="collection-item">
Abe
</li>
<li class="collection-item">
Adam
</li>
<li class="collection-item">
Alan
</li>
<li class="collection-item">
Anna
</li>
</div>
<li class="collection-header">
<h5>B</h5> <input type="box" id="ipt2">
</li>
<li class="collection-item">
Beth
</li>
<li class="collection-item">
Bill
</li>
<li class="collection-item">
Bob
</li>
<li class="collection-item">
Brad
</li>
<li class="collection-header">
<h5>C</h5> <input type="box" id="ipt3">
</li>
<li class="collection-item">
Carrie
</li>
<li class="collection-item">
Cathy
</li>
<li class="collection-item">
Courtney
</li>
</ul>
</div>
Here is a working example:
let filterInput = document.getElementById("filterInput");
filterInput.addEventListener("keyup", filterNames);
function filterNames() {
// Get value of input
let filterValue = document.getElementById("filterInput").value.toUpperCase();
// Get names ul
let ul = document.getElementById("names");
// Get lis from ul
let li = ul.querySelectorAll("li.collection-item");
// Loop through collection-item lis
for (let i = 0; i < li.length; i++) {
let a = li[i].getElementsByTagName("a")[0];
// If matched
if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function do1() {
var input1 = document.getElementById("ipt1").value;
var a = document.createElement("a");
a.textContent = input1;
a.setAttribute('href', "#");
var li = (document.createElement("li"));
li.setAttribute('class', 'collection-item');
li.appendChild(a);
var div = document.getElementById("div1");
div1.appendChild(li);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<div class="container">
<h1 class="center-align">
My Contacts
</h1>
<input type="text" id="filterInput" placeholder="Search names...">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>A</h5> <input type="box" id="ipt1"> <button onclick="do1();">`click me to add another contact`</button>
</li>
<div id="div1">
<li class="collection-item">
Abe
</li>
<li class="collection-item">
Adam
</li>
<li class="collection-item">
Alan
</li>
<li class="collection-item">
Anna
</li>
</div>
<li class="collection-header">
<h5>B</h5> <input type="box" id="ipt2">
</li>
<li class="collection-item">
Beth
</li>
<li class="collection-item">
Bill
</li>
<li class="collection-item">
Bob
</li>
<li class="collection-item">
Brad
</li>
<li class="collection-header">
<h5>C</h5> <input type="box" id="ipt3">
</li>
<li class="collection-item">
Carrie
</li>
<li class="collection-item">
Cathy
</li>
<li class="collection-item">
Courtney
</li>
</ul>
</div>
The issues you were having
var item = document.createTextNode(input1); // this line was not needed as you already had the text
var li = document.createElement('li').className = "collection-header"; // assigning a string here causing errors. Use setAttribute() not class name.
div1.appendChild(item).innerHTML = item; assigning to innerHTML of appended child
so changing the function from:
function do1() {
var input1 = document.getElementById('ipt1').value;
var item = document.createTextNode(input1);
var li = document.createElement('li').className = "collection-header";
var a = document.createElement('a');
var child1 = li.appendChild(a);
var div = document.getElementById('div1');
div1.appendChild(item).innerHTML = item;
}
to :
function do1() {
var input1 = document.getElementById("ipt1").value; // get the value of the input
var a = document.createElement("a"); // create new a tag
a.textContent = input1; // Set the text of the a tag
a.setAttribute('href', "#"); // Set the href attribute of the a tag
var li = (document.createElement("li")); // Create new list item
li.setAttribute('class', 'collection-item'); // Set class attribute of li tag
li.appendChild(a); // Append the a tag to the list item
var div = document.getElementById("div1"); // get the containing div
div1.appendChild(li); // append the new list item to the div
}
Now you are able to append to the first div around A. To append to others, you first would need div tags with different ID's. Then you would just need to either create a new function for each one or pass which div ID you were calling the method on..
Hope this helps.
Look at the following line of code:
var li = document.createElement('li').className = "collection-header";
This code assigns the string "collection-header" to the variable named li. Strings don't have the appendChild function, so your code is crashing on the line:
var child1 = li.appendChild(a);
Not sure what your intention is by using two = in the same line of code. If you can explain that further, perhaps someone can help you achieve your desired result.

Jquery how to get ID and Title

Hello I have a UL and LI it working with function click but if get the title it not work.
Exemple:
// it work but not get title
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = ///??? how to get title h2 selector
//alert(get_id);
console.log($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<ul id="list">
<li id="myID">
<h2>Title</h2> First One </li>
<li id="myID2">
<h2>Title 2</h2> Two </li>
<li id="myID4">
<h3>Title 3</h3> Tree </li>
</ul>
You need to select the h2 element then get the text using text() like :
var get_title = $(this).find('h2').text();
As #ParthShah suggested you could use a global class like title_content on your title elements, so you could target it easily using class selector :
var get_title = $(this).find('.title_content').text();
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(this).find('.title_content').text();
console.log(get_id + ' - ' + get_title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="myID"><h2 class="title_content">Title</h2> First One </li>
<li id="myID2"><h2 class="title_content">Title 2</h2> Two </li>
<li id="myID4"><h3 class="title_content">Title 3</h3> Tree </li>
</ul>
Use :header. No need to worry for any h1,h2,h3... tag.
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(this).find(":header").text();
console.log(get_title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="myID">
<h2>Title</h2> First One </li>
<li id="myID2">
<h2>Title 2</h2> Two </li>
<li id="myID4">
<h3>Title 3</h3> Tree </li>
</ul>
</div>
use jQuery's find to query within your element.
var get_title = $(this).find("h2,h3").text() //add h4,h5 etc if you need to find those too.
https://jsfiddle.net/povu503s/
$(this).children().html();
Will take the first child and grab the HTML inside
The title is a children of your targeted li. Use the .children() function to target that heading.
Hope this helps :>
// it work but not get title
$("#list li").on('click',function(){
var get_id = $(this).attr('id');
var get_title = $(this).children().text();
alert(get_title)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list" >
<li id="myID" > <h2>Title</h2> First One </li>
<li id="myID2" > <h2>Title 2</h2> Two </li>
<li id="myID4" > <h3>Title 3</h3> Tree </li>
</ul>
give class like "title_content" to your h2 and h3 tag and then fetch title by class name.
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(".title_content", this).text();
console.log(get_id + ' - ' + get_title);
});
Please Refer below Fiddle..
Fiddle
You can use any of below
1. var get_title = $(this).find(':header').text();
2. var get_title = $(this).children().text();

jquery var = text + number

I have a bullet list <ul> with custom bullet icons. I need some kind of javascript that will go through my list and check if icon- has a number after it, if it does than add an <img> tag and add the icon- + number as a class as each icon- + number will be a different icon.
See my code below.
Thanks in advance for your help
HTML
<ul class="someclass">
<li>
<div class="divClass">
[icon-1]
</div>
Some Text
</li>
<li>
<div class="divClass">
[icon-2]
</div>
Some Other Text
</li>
</ul>
Javascript attempt
$(".someclass .divClass").each(function() {
var icon = [icon + number]
$(".divClass:contains('icon')").text().replace('<img class="icon" src="img/path/pic.png" alt="Bullet List Icon" />');
});
Try this
var i = 1;
$(".someclass .divClass").each(function() {
var icon = "[icon-" + i++ +"]";
$(".divClass:contains('"+icon+"')").html('<img class="icon" src="img/path/pic.png" alt="Bullet List Icon" />');
});
UPDATE: Keep the li text :
var i = 1;
$(".someclass li").each(function() {
var icon = "[icon-" + i++ +"]";
var liText = $(this).text(); // Get all text of li element
liText = liText.replace(icon, "");// Remove the [icon-i] string from the text.
$(".someclass li:contains('"+icon+"')").html('<img class="icon" src="img/path/pic.png" alt="Bullet List Icon" />'+ liText);
});
You can use this:
$('.someclass .divClass').each(function(){
//Get the actual text of div and remove the '[]'
var val = $(this).text().replace(/\[|\]/g, "");
//Check if the string has a number
if(val.match(/\d+/g) !== null){
//If true set the class as the prev text and add the img tag
$(this).addClass(val).html('<img src="http://placehold.it/50"/>');
}
})
.icon-1 {
background:purple;
}
.icon-2 {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="someclass">
<li>
<div class="divClass">
[icon-1]
</div>
Some Text
</li>
<li>
<div class="divClass">
[icon-2]
</div>
Some Other Text
</li>
<li>
<div class="divClass">
[icon]
</div>
Some Other Text
</li>
</ul>

jquery - on hover li width id - show the matching id div

<ul class="level0">
<li class="level1" id="cat2441"></li>
<li class="level1" id="cat2450"></li>
<li class="level1" id="cat2455"></li>
</ul>
<div class="alles-zwei" id="new-cat2441"></div>
<div class="alles-zwei" id="new-cat2450"></div>
<div class="alles-zwei" id="new-cat2455"></div>
Hallo, on hover the li(id) element I would like to show the matching div(id) – and hover an another li (wrong id) or leaving the ul I would like to hide the div
my approach was
jQuery('.alles li').mouseover(function() {
var cat = '"#new-' + this.id + '"';
jQuery(cat).fadeIn();
});
You were using the wrong selectors. Also '"#new-' + this.id + '"' this syntax is wrong. There is no need to add those double quotes inside the string.
jQuery('.level0 li').hover(function() {
var cat = '#new-' + this.id;
jQuery(cat).show();
}, function() {
var cat = '#new-' + this.id;
jQuery(cat).hide();
});
.alles-zwei {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="level0">
<li class="level1" id="cat2441">cat2441</li>
<li class="level1" id="cat2450">cat2450</li>
<li class="level1" id="cat2455">cat2455</li>
</ul>
<div class="alles-zwei" id="new-cat2441">cat2441</div>
<div class="alles-zwei" id="new-cat2450">cat2450</div>
<div class="alles-zwei" id="new-cat2455">cat2455</div>
You could do this without having to rely on the id of the element just use the class of the two elements. When you select the class it gets returned as an array so you can match the level1 class array with the alles-zwei class array. It will also simplify your HTML code.
$('.level1').hover(function(){
// Gets the index of the current li emement.
var indx = $(this).index();
// Gets the div element based on the hovered li and hides its siblings.
$('.alles-zwei').eq(indx).show().siblings('div').hide();
});

jQuery append() and data()

I have unknown number of divs with increasing ID's:
<div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>
And I have another list:
<ul>
<li id="target-1" class="target"> </li>
<li id="target-2" class="target"> </li>
<li id="target-3" class="target"> </li>
<li id="target-4" class="target"> </li>
</ul>
Now, what I want to achive is grabbing data-grab URL from source-1 and append it to target-1 as a image and so forth. So finally the output list will look just like:
<ul>
<li id="target-1"><img src="someURL" /> </li>
<li id="target-2"><img src="anotherURL" /> </li>
<li id="target-3"><img src="anddifferentURL" /> </li>
<li id="target-4"><img src="andthelastoneURL" /> </li>
</ul>
I'm grabbing all the data from the first list, but I'm not sure how to append right source element to right target element?
$(document).ready(function(){
$('.target').each(function(){
var URL = jQuery(this).data('grab');
});
});
$(document).ready(function(){
$('.target').each(function(){
var $this = $(this);
var divID = "source-" + ($this.id()).split("-")[1];
$("a", $this).append('<img src="' + $(divID).data("grab") + '" />');
});
});
You can use indices to select the right elements, if you add a class to your source elements (like .source):
$(document).ready(function(){
var targets = $( '.target' );
$('.source').each(function(index, value){
$(target[index]).children("a").first().append($("<img src=" + value.data('grab') + " />"));
});
});

Categories