Jquery how to get ID and Title - javascript

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

Related

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

Filter multiple lists BUT not all?

See the following code:
<input type="text" />
<h3>Category 1</h3>
<ul id="category1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<h3>Category 2</h3>
<ul>
<li>item27</li>
<li>item28</li>
</ul>
<h3>Category 3</h3>
<ul>
<li>item132</li>
<li>item437</li>
</ul>
This is the JS
$(function(){
$('input[type="text"]').keyup(function(){
var text = $(this).val().toLowerCase();
$('ul li').each(function(){
if($(this).text().toLowerCase().indexOf(text) == -1)
$(this).hide();
else
$(this).show();
});
});
});
This will filter the lists BUT my question is how can I have it filter the Category 1 & 2 lists BUT NOT the Category 3 list. I want the category 3 list to stay in tact as the other lists are filtered down. Thank you in advance for any advice or guidance.
If you give an id to the third ul, then you can exclude it using the :not() pseudo-class.
Updated Example
$('ul:not(#category3) li').each(function() {
// ...
});
If you have to exclude multiple element, it would probably be better to just exclude a specific class.
In this case, the class .exclude was added to the third ul element:
$('ul:not(.exclude) li').each(function() {
// ...
});
Try using :lt() selector with parameter 3 to return li elements having index less than 3
$("ul li:lt(3)")
$(function(){
$('input[type="text"]').keyup(function(){
var text = $(this).val().toLowerCase();
$('ul li:lt(3)').each(function(){
if($(this).text().toLowerCase().indexOf(text) == -1)
$(this).hide();
else
$(this).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
<h3>Category 1</h3>
<ul id="category1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<h3>Category 2</h3>
<ul>
<li>item27</li>
<li>item28</li>
</ul>
<h3>Category 3</h3>
<ul>
<li>item132</li>
<li>item437</li>
</ul>
If you want to skip anything under category 3, you can do
$('ul li').each(function(){
// the li...the ul...the h3
var header=$(this) .parent().prev().text();
if (header==="Category 3"){
return true; //return true is like `continue` in an each block
}
//...rest of your code
Used some jQuery selector magic here: $('ul').not(':last-child').children('li'); which grabs all ul elements, removes the last ul from the selected set, and then gets the children.
$('input[type="text"]').keyup(function(){
var text = $(this).val().toLowerCase();
var lis = $('ul').not(':last-child').children('li');
lis.each(function(){
var contents = $(this).text().toLowerCase();
$(this).toggle(contents.indexOf(text) >= 0);
});
});

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

Select an element if ID partially matches

I have the following HTML:
<header>
<nav>
<ul>
<li id="menu-item-1">Lien 1</li>
<li id="menu-item-2">Lien 2</li>
<li id="menu-item-3">Lien 3</li>
</ul>
</nav>
</header>
<article id="content">
<div id="post-1" class="page">
<p>content post 1</p>
</div>
<div id="post-2" class="page">
<p>content post 2</p>
</div>
<div id="post-3" class="page">
<p>content post 3</p>
</div>
</article>
The idea is the following: if the number after menu-item- matches the number after post- then do something.
How do I do that?
The final goal is to display each div when i click on the corresponding menu link
menu-item-1 -> display post-1
menu-item-2 -> display post-2
menu-item-3 -> display post-3
Thanks !
$('nav').on('click', 'li', function(e) {
$('#post-' + this.id.replace('menu-item-', '')).show().siblings().hide();
});
Demo: http://jsfiddle.net/fKgdL/1
$('nav li').click(function() {
// Optional: hide other posts
$('.page').hide();
// Show the correct post
var id = this.id.replace('menu-item-', '');
$('#post-' + id).show();
});
You can do something like this:
$('a').click(function(){
$id = $(this).closest('li').prop('id'); // Get the id
$("#post-"+id.split("-")[2]).show(); // show the post
});
$('nav li').click(function() {
var id = this.value.split('-')[1];
var ele = $('#post-' + id);
ele.show();
$('.page').not(ele).hide();
});
$('li').click(function(){
var pID= $(this).attr('id').split('-')[2];
$('#content').find('div').each(function(){
if(pID==$(this).attr('id').split('-')[1]){
//DO SOMETHING HERE...
}
});
});

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