We Keep Coding

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 - 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();
});

How to select phone number and contact from html element using jQuery?

I want to select phone number and contact name from html form and not able to select it with my code. I don't know what is wrong?
<ul class="contact-list">
<li>
<div class="phone">0128685665</div>
(Mike Lau)
</li>
<li>
<div class="phone">0242342354</div>
(John Son)
</li>
<li>
<div class="phone">012343534</div>
(Sam)
</li>
</ul>
and here is my code
var contact=[];
$('.contact-list').eq(0).find('li').find('.phone').each(function (i,elem){
contact.push($(elem).text().replace(/[A-Za-z\s]+/,'').trim());
});
for(var i=1;i<contact.length;i++){
console.log(contact[i]);
}
How can I select all phone numbers and contact names? Thanks in advace

$(".phone").each(function(){
var name = $(this).parent().clone().children().remove().end().text();
var phonenumber = $(this).text();
contact.push({name: name, phoneNumber: phonenumber});
});
console.log(contact);

created this fiddle for you
var contact=[];
$('.contact-list li ').each(function (i,elem){
contact.push( {
phone : $( this ).find('.phone').html(),
contact : $.trim( $( this ).clone().children().remove().end().text() ),
} );
});
for(var i=0;i<contact.length;i++){
console.log(contact[i]);
}
or simply just
$('.contact-list li ').each(function (i,elem){
contact.push( $.trim( $( this ).clone().children().remove().end().text() );
});

i think this is work fine for you.
var contact=[];
$('.contact-list li').each(function (i,item){
contact.push($(item).find(".phone").text().replace(/[A-Za-z\s]+/,'').trim());
});
for(var i=1;i<contact.length;i++){
alert(contact[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul class="contact-list">
<li>
<div class="phone">0128685665</div>
(Mike Lau)
</li>
<li>
<div class="phone">0242342354</div>
(John Son)
</li>
<li>
<div class="phone">012343534</div>
(Sam)
</li>
</ul>

You can easily add span or div to names and fetch them into object, later which adds into array.
Please see code for html
var contact=[];
$('.contact-list').eq(0).find('li').each(function (key,value){
var phone = $(value).find('.phone').text().replace(/[A-Za-z\s]+/,'').trim();
var name = $(value).find('.name').text().trim();
contact.push({"name":name,"phone":phone});
});
for(var i=0;i<contact.length;i++){
alert(("name " + contact[i].name) + " and " + "phone " + contact[i].phone);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="contact-list">
<li>
<div class="phone">0128685665</div>
<span class="name"> (Mike Lau)</span>
</li>
<li>
<div class="phone">0242342354</div>
<span class="name">(John Son)</span>
</li>
<li>
<div class="phone">012343534</div>
<span class="name">(Sam)</span>
</li>
</ul>
You can also will need onload function or ondocumentready so your code runs as soon as page loads, or when you perform some action it will be triggered.

You should include the names in a separate tab as well. Some thing like this:
<ul class="contact-list">
<li>
<div class="phone">0128685665</div>
<div class="name">(Mike Lau)</div>
</li>
<li>
<div class="phone">0242342354</div>
<div class="name">(John Son)</div>
</li>
<li>
<div class="phone">012343534</div>
<div class="name">(Sam)</div>
</li>
</ul>
Then you can easily fetch names and phones using jQuery.

This should work, here is a demo jsFiddle.
jQuery
// array list of contacts:
var contacts = [];
// contact class:
function contact(name, phone) {
this.name = name,
this.phone = phone
}
// retrieve contact info from the DOM:
$('.contact-list li ').each(function(index, element) {
var phone = $(this).find('.phone').text();
var name = $.trim($(this).children().remove().end().text());
var person = new contact(name, phone);
contacts.push(person);
});
// view all contacts in array list:
for (var i = 0; i < contacts.length; i++) {
console.log(contacts[i].name, contacts[i].phone);
}

Add data-attribute to appended object src

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>");
});

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') + " />"));
});
});