Here our simple code snippet of jquery, where we want to select the p element, but what am i writing is not correct, so help us to get them.
<div class="first">
<ul class="first_ul">
<li class="first_li">
<a href="javascript:void(0)">
<div class="hello"></div>
<p class="firstP" url="hello.html">Content of First Paragrph</p>
</a>
</li>
<li class="second_li">
<a href="javascript:void(0)">
<div class="hello"></div>
<p class="firstP" url="hello2.html">Content of Second Paragrph</p>
</a>
</li>
</ul>
</div>
Here , what i am doing
$('.fist_ul .first_li:first-child p');
and actually we want to get the attribute of p element url
Thanks.
$('.first_ul .second_li p');
Seems there was misspell. And your code is not semantic, I mean, inside the <li> there is another <li> it is incorrect.
You have incorect selector . it should use :
$('.first_ul .first_li:first-child p');
Working Demo
You can try with this
$(".first_ul li").find('p')
you can try like this
$('.first_ul .first_li p').attr('url'); // for only <P> of first li's url
$('.first_ul .second_li p').attr('url'); // for only <P> of second li's url
// for all the <p> you have used in all the <li>s
$('.first_ul li p').each(function(k,v){
var wq = $(v).attr('url');
console.log(wq);
});
Related
I want to display NEWS headines on my website. I want to populate it using Jquery. I have written the code but nothing is displayed on webpage.
HTML code:
<div class="col-md-4">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<strong>Latest Headines</strong>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
</ul>
</div>
</div>
JS code:
$(document).ready(function() {
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function(json) {
console.log(json);
console.log(json.articles.length);
function headlines (json) {
for(var i=0;i<5;i++){
$('.sidebar-nav li a h2').eq(i).html(json.articles[i].title);
}
}
});
});
I have made a class called sidebar then inside class I have placed list and anchor followed by <h2></h2> tag. I want to populate h2 tag with NEWS headlines but nothing is displayed on my webpage.
$('.sidebar-nav li').eq(i).find('h2').html(...)
li is the Nth element you're looking for, not h2.
For that matter, you should cache the nav element or the lis, to avoid hammering the DOM :
var $lis = $('.sidebar-nav li')
for(var i=0;i<5;i++){
$lis[i].find('h2').html(json.articles[i].title);
}
First of all: You don't call your function headlines so nothing goes to output ;)
Second one:
$('.sidebar-nav li a h2').eq(i)
will only work for the first item i think, because there is only 1 H2-Tag within the a-Tag.
I suggest giving all H"-Tag a class like ".headline" and itterating over them.
I hope this helps ;)
I have an html like this
<ul class="products">
<li>
<a href="#" class="product-images">
<span class="featured-image">
<img src="img1.jpg"/>
<img src="img1-1.jpg"/>
</span>
</a>
</li>
<li>
<a href="#" class="product-images">
<span class="featured-image">
<img src="img2.jpg"/>
<img src="img2-2.jpg"/>
</span>
</a>
</li>
//some other li elements
</ul>
What I want to do is get the fist image in the first li element and remove that with jQuery.
What I've tried
jQuery (document).ready(function(){
jQuery('.products li:first .featured-image img:first').remove();
});
But that removes all img under first span.
Any help is appriciated.
You can select first li and then find first img inside it and remove it DEMO.
$('.products li').first().find('img').first().remove()
Another way to do this is
$('.products li:first img:first').remove()
This works for me, where I look for the first direct child img of the first .featured-image element
jQuery (document).ready(function(){
jQuery('.featured-image:first > img:first').remove();
});
I have this html code
<div id="left-container" class="w3-container w3-left">
<div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
<h1>Give</h1>
<h3>Selected Definition:</h3>
<ul style="display:none;">
<li> offer in good faith </li>
<li> inflict as a punishment </li>
<li> afford access to </li>
</ul>
</div>
<div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
<h1>Up</h1>
<h3>Selected Definition:</h3>
<ul style="display:none;">
<li> to a higher intensity </li>
<li> to a later time </li>
<li> used up </li>
</ul>
</div>
</div>
<div id="right-container" class="w3-container w3-right"></div>
I want the user, once he click on one of the wordDiv's, to be able to see the potential definitions of that word in the right container (which are found in the "ul" element of each "wordDiv"), select one of the definitions, then I want to display the selected definition in the original wordDiv in the left-container.
You can found Jsfiddle Demo Here
A solution using jQuery. Updated Fiddle
$(function() {
$('.wordDiv').click(function() {
var txt = $(this).find('ul').html();
$('#right-container').html('<ul>' + txt + '</ul>')
})
})
Please check this fiddle
I have added li elements to another div based on the div which you are selected.
You can use the jQuery this variable in the click function, here is a working jQuery example of your request Updated Fiddle
It puts the li elements in the right div AND adds the onclick listener, which has the knowlege of its origin ;)
$('h1').click(function(){
var origin=$(this);
$(this).siblings('ul').children().click(function(){
$(this).parent().hide();
$(origin).parent().append(this);
$(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
$(this).siblings('ul').show();
$("#right-container").append($(this).siblings('ul'));
})
$('ldi').click(function(){
$(this).parent().hide();
$(this).parent().parent().append(this);
$(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
I have a div which contains :
<div class="ms-core-deltaSuiteLinks" id="DeltaSuiteLinks">
<div id="suiteLinksBox">
<ul class="ms-core-suiteLinkList">
<li class="ms-core-suiteLink">
<a class="ms-core-suiteLink-a" id="ctl00_ctl56_ctl03_ShellNewsfeed" href="http://my.nbsdev.co.uk:80/default.aspx"> <span>Newsfeed</span>
</a>
</li>
<li class="ms-core-suiteLink">
<a class="ms-core-suiteLink-a" id="ctl00_ctl56_ctl03_ShellDocuments" href="http://my.nbsdev.co.uk/personal/dah/Documents/Forms/All.aspx"> <span>OneDrive</span>
</a>
</li>
<li class="ms-core-suiteLink">
<a class="ms-core-suiteLink-a" id="ctl00_ctl56_ctl03_ShellSites" href="http://my.nbsdev.co.uk/personal/dah/Social/Sites.aspx"> <span>Sites<span class="ms-suitenav-caratBox" id="Suite_ActiveLinkIndicator_Clip">
<img class="ms-suitenav-caratIcon" id="Suite_ActiveLinkIndicator" src="/_layouts/15/images/spcommon.png?rev=23">
</span></span>
</a>
</li>
</ul>
</div>
</div>
I want to get from this the li elements and then only select the 1st and second li elements and hide them
I've had a go myself with $('#DeltaSuiteLinks').children('li:first').css('visibility' , 'hidden'); but this doesn't work. Where am i going wrong?
li is not immediate child of DeltaSuiteLinks. Use .find() instead of .children()
Use
$('#DeltaSuiteLinks').find('li:first').css('visibility' , 'hidden');
As mentioned in comments, children() only selects direct childs.
You can use find() instead for selecting all matching descendants and target the first and second <li> alone using the :lt() selector
$('#DeltaSuiteLinks').find('li:lt(2)').css('visibility' , 'hidden');
You can do this in CSS alone:
ul li:nth-child(-n+2){
display: none;
}
Example fiddle
The caveat of this being the lack of support in IE8 and lower.
Another solution would be :
var li = $('#DeltaSuiteLinks').find('li');
li.eq(1).hide();
li.eq(2).hide();
Hi Please suggest on below.
I have written
var demo= $("div#side-bar ul li").find('a').find('img').parent().text();
which works fine. But giving me output as: " maximize".
I want USERNAME_TO_PRINT in answer
<div id="side-bar" >
<ul>
<li alt="User options">
<a href="#" name="nav1">
<img alt="ppawar" src=" Myprofile.png" /> USERNAME_TO_PRINT
</a>
<div class="jx-arrow-up"></div>
<ul id="nav-1" style="display: none;">
<li>
<a href="#">
<img align="absmiddle" src="maximize.png" />
Maximize
</a>
<div class="jx-arrow-up"></div>
</li>
</ul>
</li>
</ul>
</div>
With your HTML fixed (that </div> removed), telling jQuery to find only direct descendants will get you the string you want.
var demo= $("div#side-bar > ul > li > a").text();
console.log(demo);
WORKING DEMO
There are many ways to select an element. Popnoodles' answer is correct, this will work too:
var demo = $("div#side-bar ul li a:eq(0)").text()
console.log(demo)
You can also use :first or .first().
All these loooooong hand query selectors are okay - but do you really want to write code like that ?
If you have the ability to add a name to a close element <a href="#" name="nav1"> then why not
$('a[name=nav1]').text();
Edit: missed to send the selector as a string -- thanks #pop : )