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();
});
Related
I have a menu where LI sometimes have an img and sometimes not.
<ul id="manufact">
<li>
<a href="" class="aaa">
<img>
<span>First name</span>
</a>
</li>
<li>
<a href="" class="bbb">
<img>
<span>Second name</span>
</a>
</li>
</ul>
When there is "aaa" class in href I have to delete only first word in span. And when is "bbb" - not, but delete the img (cause in this case I don't have the real .jpg file to display, and in Safari there is a blank ugly "?").
So I try smthg like this
$('#manufact li > a span').each(function(){
var element = $(this);
if($(this).closest("a").is( ".aaa")){
element.text(element.text().split(' ').splice(1).join(' '));
}
// It works
else {
Here I failed to put some JS to delete top Img.
}
});
My desired result is (played with closest, previous, parent etc but failed)
<ul id="manufact">
<li>
<a href="" class="aaa">
<img>
<span>name</span>
</a>
</li>
<li>
<a href="" class="bbb">
<span>Second name</span>
</a>
</li>
</ul>
You can try as follows:
$('#manufact li > a span').each(function() {
var element = $(this);
if ($(this).closest("a").is(".aaa")) {
element.text(element.text().split(' ').splice(1).join(' '));
}
else if ($(this).closest("a").is(".bbb")) {
$(this).prev("img").remove();
}
});
You can use something like:
$('#manufact li a.aaa span').each(function(){
var element = $(this);
element.text(element.text().split(' ').splice(1).join(' '));
});
$('#manufact li a.bbb img').each(function(){
$(this).remove();
});
On a form, I have to select all first <a> elements with a specific attribute value from all the list items present in the form. For instance, in the below code, I have to select <a> elements with the content xxx and zzz — or in other words, the first <a> element with data-role="modal" from all list items.
console.log($('ul li a[data-role="modal"]:first'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
The jQuery I tried is only selecting the one with xxx.
You can use .find() to get all a elements with attribute data-role=modal in ul li and apply :eq to get first for each match:
$('ul li').find('a[data-role="modal"]:eq(0)').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
References
.find()
:eq
Check this
$('document').ready(function(){
$('ul li').each(function(){
$(this).find('a[data-role=modal]:first').css('background-color','red');
});
});
I guess this may help
$('document').ready(function(){
$('ul li').each(function(){
$(this).find('a[data-role="modal"]').first().css('background-color','red');
});
});
Try:
$('ul li').find('a[data-role="modal"]:first')
console.log( $('ul li').find('a[data-role="modal"]:first').map(function() {
return $(this).text();
}).get() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
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();
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 : )