My code:
<div id = "1">
<h1>Heading 1</h1>
<p class = "V">VVV</p>
<ul>
<li>line 1</li>
<li>line 2</li>
</ul>
<p class = "A">AAA</p>
</div>
<div id = "2">
<h1>Heading 2</h1>
<p class = "V">VVV</p>
<ul>
<li>line 1</li>
<li>line 2</li>
</ul>
<p class = "A">AAA</p>
</div>
$('ul').hide();
$('p.A').hide();
$('p.V').click(function(){
$(this).next('ul').slideDown('slow');
$(this).hide();
$(this).closest('p.A').show(); // <-- How do I select 'p.A' in the current div?
});
http://jsfiddle.net/S8xcz/7/
This works great up until 'p.V' is hidden. From there, I need to display the 'p.A' (the 'up arrow').
How do I navigate to this?
I'm assuming that hidden elements are still navigable - is this correct?
The closest method goes up the DOM tree to find an ancestor, you probably want to use nextAll('p.A').
http://jsfiddle.net/ambiguous/pWDth/
Or parent() and find(): $(this).parent().find('p.A').show();
http://jsfiddle.net/ambiguous/pWDth/1/
Or perhaps siblings: $(this).siblings('p.A').show();
http://jsfiddle.net/ambiguous/pWDth/2/
I'd probably use $(this).parent().find('p.A') as that's the least sensitive to how the HTML is arranged.
Replace
$(this).closest('p.A').show();
with
$(this).siblings('p.A:first').show();
Related
I'm working on a script to add some extra features to a menu. The current user-menu is a drop-down list with links such as My profile, My reports, etc. I'm looking to add another item, "My posts".
I'm having a couple of difficulties due to the way the site is working.
This is the code for the drop down:
<li class="user expandable">
*list items*
</li>
I'm using document.getElementById to pick up elements but have no idea how to pick up the list and add an item to it. I believe there are other element pickers such as class but they didn't seem to work either.
Adding item to html list with JS when there is no ID
To get the first found item document.querySelector then use a css selector for example document.querySelector('div') to find the first div or document.querySelector('.user') to find the first element with class user
to get every item that matches document.querySelectorAll which will return an array of all the items matched.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
const list = document.querySelector('.user.expandable');
function addMyNewRow(message, index = 0) {
const node = document.createElement('li');
node.innerHTML = message
list.insertBefore(node, list.childNodes[index]);
}
function addChild() {
addMyNewRow('clicked and added in first');
}
addMyNewRow("added in second", 2)
<ul class="user expandable">
<li>old list item</li>
<li>old list item</li>
<li>old list item</li>
<li>old list item</li>
</ul>
<button onclick="addChild()">add list </button>
I think this is something similar to what you're looking for:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$(".user").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<ol class="user expandable">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn2">Append list item</button>
</body>
</html>
$( "li" ).hover(
function() {
$( this ).append( $( hfhfhfha ) );
}
);
"this" keyword gives you the reference you need.
I have a list structure that looks as follows:
<ul id="BirdMother" class="parent">
<ul class="child">
<li class="baby">
</ul>
<ul class="child">
<li class="baby">
</ul>
<ul class="child">
<li class="baby">
</ul>
</ul>
I want to select all the baby list items in an iterative manner to use in a function that looks like this: function feedBabies(babyList).
How can I select all the baby items?
Edit: What if there are multiple baby items in the page and I only want the babies from a certain parent list. Eg: Only Bird babies. (Edited the code above).
Just use class selector
var babyList = $(".baby");
feedBabies(babyList);
For certain parent
var babyList = $("#BirdMother .baby");
feedBabies(babyList);
Here you have solution
$("#useThisList > ul").each(function(){
alert($(this).html());//this will give you html
alert($(this).text());// this will give you text in li
});
I have 2 lists of elements. When I click on an element of first list (it is a link), I basically need to add css class 'is-active' to that element AND to corresponding item from another list. I think they have to be in separate lists, as they are in two different bootstrap columns for mobile friendliness. I am currently styling elements from first list with:
$(document).ready(function(){
$('.tabs li').click(function(){
$(this).addClass('is-active');
$('.tabs li').not(this).removeClass('is-active');
});
})
Can't select elements from the other list though.. Any ideas how can I achieve this functionality with css, js/jquery?
My html structure currently is like this:
<div class="col-md-6">
<ul class="tabs">
<li class="tabs-title is-active">
title_1
</li>
<li class="tabs-title">
title_2
</li>
</ul>
</div>
<div class="col-md-6">
<div class="tabs-content">
<div class="tabs-panel is-active">
<div class="entry">
<p>content_1</p>
</div>
</div>
<div class="tabs-panel">
<div class="entry">
<p>content_2</p>
</div>
</div>
</div>
</div>
When I click on 2nd link from first column, the 2nd div from second column should get 'is-active' class. Is this possible?
I guess lists do not have corresponding elements right now. What do I need to have the items linked in some way?
Here's an example, since we don't know what your list looks like.
<ul class="tabs">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul class="letters">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
Also, it's easier to remove all instances of the is-active class and then add it just to the target elements.
$(document).ready(function(){
$('.tabs li').click(function(){
var index = $('.tabs li').index(this);
$('.tabs li, .letters li').removeClass('is-active');
$(this).addClass('is-active');
$('.letters li').each(function(i) {
if (i == index)
$(this).addClass('is-active');
})
});
})
https://jsfiddle.net/fzeauw7a/
I use jQuery, and I have multiple tabs, that look mostly different. There is a selectbox that's shared over all tabs and I basically want it to have the same values and selected value over all the different tabs, so if it's changed in one tab then it's also changed in the other tab.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
Content 1
<select>
<option>op1</option>
<option>op2</option>
</select>
</div>
<div id="tab-2">
Content 2
<select>
<option>op1</option>
<option>op2</option>
</select>
</div>
</div>
And the tabs get selected by
$(document).ready(function(){
$("#tabs").tabs();
}
I want the first selectbox to be copied on the second tab, or be equal to the other selectbox at all times. Is there a clean way to do this (not copying on tab.change() or something), or maybe a wholly different approach to this?
I hope it works for you. The code is written in very hurry. sorry for inconvenience.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
Content 1
<span id="fcont"><select><option>op1</option><option>op2</option></select></span>
</div>
<div id="tab-2">
Content 2
<span id="scont"></span>
</div>
</div>
And in jQuery
$(function()
{
var mysel= "";
$("#tabs").tabs();
$('#tab-1').click(function()
{
mysel = $("#scont").html();
if(mysel)
{
$("#fcont").html(mysel);
$("#scont").html("");
}
});
$('#tab-2').click(function()
{
mysel = $("#fcont").html();
$("#scont").html(mysel);
$("#fcont").html("");
});
});
Have you tried using .clone jQuery function.
$(SELECT).clone().append(NEWTAB_HTML);
In Detail.
$(function()
{
$("#tabs").tabs();
$('#tab-2').click(function()
{
var newSelect = $('#tab-1 select').clone().attr('id','new_id_value');
$(this).append(newSelect);
});
});
I've been trying to get this problem solved, but I can't seem to figure it out without some serious workarounds.
if I have the following HTML:
<ul>
<li class="parent"> headertext </li>
<li> text </li>
<li> text </li>
<li> text </li>
<li class="parent"> headertext </li>
<li> text </li>
<li> text </li>
</ul>
Now, how do I now just select the <li> tags following the first parent (or second, for that matter)? Basically selecting an <li> with class="parent" and the following siblings until it reaches another <li> with the parent class.
I could restructure the list with nested lists, but I don't want to do that. Any suggestions?
actually, you can easily do this using nextUntil().
no need to write your own "nextUntil" since it already exists.
ex. -
$(".a").nextUntil(".b");
or as suggested by Vincent -
$(".parent:first").nextUntil(".parent");
The root of your problem is that the <li>s you have classed as parent really are NOT parents of the <li>s "below" them. They are siblings. jQuery has many, many functions that work with actual parents. I'd suggest fixing your markup, really. It'd be quicker, cleaner, easier to maintain, and more semantically correct than using jQuery to cobble something together.
I don't think there is a way to do this without using each since any of the other selectors will also select the second parent and it's next siblings.
function getSibs( elem ) {
var sibs = [];
$(elem).nextAll().each( function() {
if (!$(this).hasClass('parent')) {
sibs.push(this);
}
else {
return false;
}
});
return $(sibs);
}
You will have to run the loop yourself since jQuery does not know how to stop on a specific condition.
jQuery.fn.nextUntil = function(selector)
{
var query = jQuery([]);
while( true )
{
var next = this.next();
if( next.length == 0 || next.is(selector) )
{
return query;
}
query.add(next);
}
return query;
}
// To retrieve all LIs avec a parent
$(".parent:first").nextUntil(".parent");
But you may be better using a really structured list for your parent/children relationship
<ul>
<li class="parent"> <span>headertext</span>
<ul>
<li> text </li>
<li> text </li>
<li> text </li>
</ul>
</li>
<li class="parent"> <span>headertext</span>
<ul>
<li> text </li>
<li> text </li>
</ul>
</li>
</ul>
$("li.parent ~ li");
I know this is a very old thread, but Jquery 1.4 has a method called nextUntil, which could be useful for this purpose:
http://api.jquery.com/nextUntil/
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var fred = $("li").not('.parent').text();
$('#result').text(fred);
});
});
</script>
</head>
<body>
Click me
<ul>
<li class="parent"> headertextA </li>
<li> text1 </li>
<li> text2 </li>
<li> text3 </li>
<li class="parent"> headertextB </li>
<li> text4 </li>
<li> text5 </li>
</ul>
<div id="result"></div>
</body>
</html>