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 : )
Related
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>'))
})
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);
});
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();
I´m trying to target a <div> which is the next <li> of the parent <div> of the function show_projectinfo(). I've tried .next(), .closest(), etc... with no luck, any ideas?
The function is that if I click on a.more_info then the li.slider img is hidden... I don´t know if it is out of scope completely... This is a div that is repeated so I can´t just use the IDs.
markup:
<li class="info">
<a id="previous-slider"> < </a>
<span>01/15</span>
<a id="next-slider" href="javascript:void(0)"> > </a>
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo()">Info</a>
</li>
<li class="slider">
<img src="img/horizontal.jpg" alt="horizontal" width="624" height="429">
</li>
this is the script:
function show_projectinfo(){
$(this).closest('.slider img').hide();
$('.info_content').fadeIn();
}
The basic problem is that you are calling the method from onclick instead of binding it with jquery.
In the way you use it, the this refers to the window and not the element that was clicked.
function show_projectinfo(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
$(function(){
$('.more_info').click(show_projectinfo);
});
and remove the onclick attribute from the html
If you have (although you shouldn't) to use the onclick attribute then pass it the this as an argument
function show_projectinfo(element){
$( element ).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
and
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo(this)">Info</a>
Try:
$(this).parent().next() // parent() should be the <li> then next() will get your next <li>
$('.more_info').click(function(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
});
Instead of .closest use .parent and .next, then select the img with .find.
Check out this jsFiddle:
$("a.more_info").bind("click", function(e){
e.preventDefault();
$(this).parent("li").next("li.slider").find("img").hide();
$('.info_content').fadeIn();
return false;
});
$('li').click( function (){
var nextLi = $(this).closest('div').next().children('li:first-child').attr('id');
console.log(nextLi);
});
Considering below markup:
<div id='div1'>
<li id='1'>1</li>
<li id='2'>2</li>
<li id='3'>3</li>
</div>
<div id='div2'>
<li id='4'>4</li>
<li id='5'>5</li>
<li id='6'>6</li>
</div>
You can see my live jsFiddle for more details.