How can I select the first specific inner element? - javascript

Here is my HTML?
<ul>
<li>
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
And this is my jQuery code:
$('li').on('click', function(){
var link = $(this).find('a').attr('href');
})
As you see, there is two <a> tags. And .find() refersh to both of them. While I just want to select the <a> which is right inside (one level) in the <li> tag. So expected result is ./link.
What alternative should I use instead of .find() ?

You can use the direct descendant selector.
$('li').on('click', function(){ var link = $(this).find('> a').attr('href'); })

Try with eq(0) .It will get the first a tag
Or
Do with first('a')
$(this).children().first('a').attr('href')
$('li').click(function(){
console.log($(this).children('a').eq(0).attr('href'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>click
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>

Method 1: Using Jquery's children and first
$('#myList').on('click', function() {
var link = $('#myList').children('a').first();
console.log(link.attr('href'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 2: Using the immediate children selector >
$('#myList').on('click', function() {
var link = $('li > a:first');
console.log(link.attr("href"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>

the first specific element
What alternative should I use instead of .find() ?
$(this).find('a:first')
seems like only logical solution and easy to read by developer

Don't do so. How is the browser meant to know which link to follow? It'd be invalid HTML
I suggest you using this instead:
startmiddleend
As you can see start and end are linked to page1 but the middle points to page2.

Related

How to find deeply embedded children with jquery

I have a dom tree that looks like this:
<div class="specs>
<ul>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
</div>
How would I use jquery to go through each anchor tag and add a target="_blank";
Adding classes is not an option. I'm using node with an api call off to a cms to pull in markdown and parse it into html.
What I have:
$('#specs-container.specs > ul > li').children('a').each(function () {
$(this).attr('target', '_blank');
});
Thanks!
You can write it like this:
$('.specs ul li a').attr('target', '_blank');
But don't forget to fix your HTML code (quotes and missing closing </ul> tag).
HTML should be like this:
<div class="specs">
<ul>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
</ul>
</div>
There were a few issues with your code. Firstly, you were missing a closing " for your specs element in the HTML, next you were missing a closing </ul> at the end of your list, and finally your jQuery code was targeting an ID which does not exist in the HTML you provided.
$(function() {
$('.specs > ul > li').children('a').each(function () {
$(this).attr('target', '_blank');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specs">
<ul>
<li>
<a>Test</a>
</li>
<li>
<a>Test 2</a>
</li>
</ul>
</div>

jquery, move element to closest div

I want to move some span elements to closest div. I found the solution to my problem but it does not work for me. I have some Html code:
<ul>
<li>
<a><span>Some info</span></a>
</li>
<div class="cl1">...</div>
<li>
<a><span>Some info 2</span><a>
</li>
<div class="cl1">
...
</div>
...
</ul>
and to move <span> like this:
$('span').each(function () {
$(this).parent().parent().closest('.cl1').append(this);
})
but nothing happened. Any help would certainly be appreciated
you can't put a div in a ul, only li's.
your html has to be valid (a's, ul need to be closed)
Closest searches anscetors, not siblings.
since your markup is not valid as is, i'm not sure if you want the divs in the list or not. This example removes them from the lis, which breaks the list into two lists.
$('button').click(function() {
$('span').each(function() {
var $div = $(this).closest('ul').siblings('.cl1');
$(this).clone().appendTo($div);
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a><span>Some info</span></a>
</li>
</ul>
<div class="cl1">...</div>
<ul>
<li>
<a><span>Some info 2</span></a>
</li>
</ul>
<div class="cl1">...</div>
<button>Do Stuff</button>

jQuery - using the same function (ToggleNav/Dropdown) on multiple ID's

I'm trying to make multiple dropdown menu's on my website and I am using this jQuery for this:
$(function() {
var pull = $('#pull');
menu = $('#nav');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
Here's the html part:
<nav class="container">
<a href="#" id="pull" style="display:block;">
<h3>Menu</h3>
</a>
<ul id="nav" style="display:none;">
<li>Pizza</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
It works wonderful if I only have one drop down menu but as soon as I add another one, only one of them (doesn't matter if it's two, three or more then) is actually dropping down.
I gave every Menu it's own ID and copied the code every time and replaced the ID's but this doesn't work.
Already looked into this (using the same function of different events ) or this (Jquery - use the same function for multiple requests) and other threads but i can't figure out how to apply this on my code...
Here's my Jsfiddle on what I'm trying to do: https://jsfiddle.net/thwdyccr/2/
Use classes instead of ids, and then you can make the same code work for all cases (fiddle):
$(function () {
var pull = $('.pull');
$(pull).on('click', function (e) {
e.preventDefault();
var menu = $(this).next();
menu.slideToggle();
});
});
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
Try this:
https://jsfiddle.net/thwdyccr/5/
Rather than using IDs - consider using a class instead - this'll save you lots of duplication in your code (as essentially it's all doing the same thing).
You can specify the target selector (e.g. the element you want to show) by traversing your structure with .parent() .children() or .find()
If you're wondering why I am storing $(this) in var element - it is because the browser has to figure out what $(this) is each time you use it - so it's good practice to store it in a variable.
HTML
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Bear</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Fish</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
JS
$(function() {
$(".pull").click(function(e) {
e.preventDefault();
var element = $(this);
element.parent('nav.container').children("ul.nav").slideToggle();
});
});
You shouldn't use id's for pull. Here's an updated fiddle https://jsfiddle.net/thwdyccr/2/.
Try utilizing Attribute Starts With Selector [name^="value"] [id^=pull] , e.target.parentElement.nextElementSibling to select next ul to call .slideToggle() on
$(function() {
var pull = $("[id^=pull]")
, menu = $("[id^=nav]")
, menuHeight = menu.height();
pull.on("click", function(e) {
e.preventDefault();
$(e.target.parentElement.nextElementSibling).slideToggle();
});
});
jsfiddle https://jsfiddle.net/wpvok7gy/1/

Get only direct element value with jquery

Lets say I have the following for my menu:
$(document).ready(function() {
alert($('ul li').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li><i class="font-icon"></i> Users
<ul>
<li>Overview</li>
</ul>
</li>
</ul>
As you can see as a return I get:
<i class="font-icon"></i> Users
<ul>
<li>Overview</li>
</ul>
Now the problem is that I'm only interested in: <i class="font-icon"></i> Users. Is there a way to only get that as a return without putting it in a div or span? I already tried with .text() but this only gave me the actual text Users (obviously).
Thanks in advance
I think this could be the solution: DEMO
$(document).ready(function() {
var i=$('ul li').html();
var ul=$('ul li').find('ul')[0].outerHTML;
i=i.replace(ul,'');
alert(i);
});
Use the remove() method. It's removes child elements matching a selection:
$(document).ready(function() {
var elem = $('ul li').html().remove('ul');
alert(elem);
});

Refer to nested HTML elements with jQuery

I have some extensive HTML element in the following (simplified) format:
<div id="firstdiv" class="container">
<ul>
<li id="4"> <a title="ID:4">Tree</a>
<ul>
<li id="005"> <a title="ID:005">Leaf Tree</a>
<ul>
<li id="10"> <a title="ID:10">Fruit Tree</a>
<ul>
<li id="0050338"> <a title="ID:0050338">Apple Tree</a>
<ul>
<li id="399"> <a title="ID:399">Green Apple Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="005"> <a title="ID:005">Conifer</a>
<ul>
<li id="10"> <a title="ID:10">Pine Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I want to access the value of the title attributes of all a-tags inside the div-container with the id="firstdiv" on click.
I tried the following jQuery function but it didn't work:
$("#firstdiv").children("a").on('click', function () { /*some code here*/ });
Any ideas what I'm doing wrong?
children() only goes one deep try find()
$("#firstdiv").on('click', function () {
$(this).find('a').each(function(){
console.log($(this).attr('title'))
})
});
will get all a tags titles when the #first_div is clicked
$("#firstdiv a").on('click', function () {
console.log($(this).attr('title'))
});
will get the title of the a tag you clicked on
children() does what it says, looks at child nodes only - not descendant nodes also. For that, you need find(). However, you need neither in your case, just a change to your selector.
$('#firstdiv a')
As with CSS, a space in the selector denotes a child OR descendant.
According to the jQuery documentation
The .children() method differs from .find() in that .children() only
travels a single level down the DOM tree while .find() can traverse
down multiple levels to select descendant elements (grandchildren,
etc.) as well
So change your selector to:
$("#firstdiv").find("a").on("click", function () {});
This will search everything beneath #firstdiv in your DOM tree.
Or even:
$('#firstdiv a').click(function(){
... do stuff
});
That will select all 'a' elements within #firstdiv
Try this http://jsfiddle.net/ApfJz/22/
$("#firstdiv a").on('click', function () { alert($(this).attr('title')); });
Demo
$(document).ready(function() {
$('#firstdiv a').click(function(){
alert($(this).attr('title'))
});
});
$("#firstdiv").find("a").on('click', function () {
});

Categories

Resources