Anyone knows How to Auto Select an option from <Li> Javascript HTML - javascript

Here is the element I got from a ebsite
I want to make a script that I can use to auto select a size (Like 12).
<div class="select-size select-size-detail" id="sizeOptions" style="display: block;">
<div></div>
<ul class="select-box-size">
<li currupc="00886737650974">6.5</li>
<li currupc="00886737650981">7</li>
<li currupc="00886737659267">7.5</li>
<li currupc="00886737659274">8</li>
<li currupc="00886737659281">8.5</li>
<li currupc="00886737659304">9</li>
<li currupc="00886737659328">9.5</li>
<li currupc="00886737659335">10</li>
<li currupc="00886737659342">10.5</li>
<li currupc="00886737659359">11</li>
<li currupc="00886737659397">12</li>
</ul>
</div>
</div>


$('li').click(function(){
$('li').each(function(){ $(this).css({'border-style':'none'}); });
$(this).css({'border-style':'solid','border-width':'2px','border-color':'gray'});
alert('Select '+$(this).text() );
});
function click_li_by_value(_value){
$('li').each(function(){
var li_text=$(this).text();
if(li_text==_value){
$(this).click();
}
});
}
click_li_by_value('12'); //or '11' or '10.5'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select-size select-size-detail" id="sizeOptions" style="display: block;">
<div>
<ul class="select-box-size">
<li currupc="00886737650974">6.5</li>
<li currupc="00886737650981">7</li>
<li currupc="00886737659267">7.5</li>
<li currupc="00886737659274">8</li>
<li currupc="00886737659281">8.5</li>
<li currupc="00886737659304">9</li>
<li currupc="00886737659328">9.5</li>
<li currupc="00886737659335">10</li>
<li currupc="00886737659342">10.5</li>
<li currupc="00886737659359">11</li>
<li currupc="00886737659397">12</li>
</ul>
</div>
</div>

Related

how to hide child elements child elements in jQuery

I have a menu populating from MySQL table and PHP up to some nested sub levels.
my menu like this:
A
B
C
If click on A first time it is showing all the child elements and again I click child elements of A it displaying child elements also fine.
But the problem is when I click on the B after open all the levels items of A it shows B sub elements fine. But again if I click A it showing all the elements except child child elements also.
I used jQuery for this.
So I want to bring back to the original state? ( only expand the top child elements, not the sub child elements ),
how to do that?
//this is my jquery code for elements clickable in menu.
$(document).ready(function() {
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").children('ul').hide();
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
});
<!-- This is the html I am generating using a PHP function -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">a1
<ul>
<li class="lichild">aaaaaa</li>
<li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">A6
<ul>
<li class="lichild">A8
<ul>
<li class="lichild">A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

Use find inside siblings and hide it.
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").find('ul').hide(); // Change in this line
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="limain">
A
<ul>
<li class="lichild">
A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">
a1
<ul>
<li class="lichild">aaaaaa</li <li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">
B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">
C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">
A6
<ul>
<li class="lichild">
A8
<ul>
<li class="lichild">
A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">
D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

$(document).ready(function () {
$(".lichild").parent().hide();
$(".limain").click(function () {
$(this).children('ul').show();
$(this).siblings().find('ul').hide();
});
$(".lichild").click(function () {
$(this).children('ul').show();
$(this).siblings('li').find('ul').hide()
});
});

Pull the active list node item in 2nd position

I have a list of items. I have node id of the 'active' class.
I want to get the active flex node_id and pull the active list item to the center position. I want to match the active_slide node_id with list item class and pull the item to center position.
eg: 233 is 'active_slide'. I want to compare the node_id and pull the list item and pull the item to center position like 69,233,299
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$('.'+node_id+'li:eq(1)').before($('.thumbnailIcon li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>

You could use the item element you already get from each and then re-order the li by insertAfter:
See a Fiddle here:
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$(item).find('.'+node_id).insertAfter($(item).find('li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>

Get all list items that do not have a data attribute that starts with value

I have a list of elements that each have a data-name attribute. I want to select all elements that do not start with the prefix "arc" and hide them.
<ul id="slides">
<li data-name="arc_1">...</li>
<li data-name="arc_2">...</li>
<li data-name="biz_1">...</li>
<li data-name="biz_2">...</li>
<li data-name="cas_1">...</li>
<li data-name="cas_2">...</li>
<li data-name="cas_3">...</li>
<li data-name="prd_1">...</li>
</ul>
I have tried to use $('#slides li[data-name^="arc"]') but it selects the opposite of what it need.

Use :not():
$('#slides li:not([data-name^="arc"])')
$('#slides li:not([data-name^="arc"])').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="slides">
<li data-name="arc_1">...</li>
<li data-name="arc_2">...</li>
<li data-name="biz_1">...</li>
<li data-name="biz_2">...</li>
<li data-name="cas_1">...</li>
<li data-name="cas_2">...</li>
<li data-name="cas_3">...</li>
<li data-name="prd_1">...</li>
</ul>

Show / Hide UL based on link clicked

I would like to show / hide UL's based on what link is clicked, not sure if this is the best way?
JS Fiddle: http://jsfiddle.net/zangief007/rj8g0yh4/1/
HTML:
<ul class="category-1 group">
<li class="name">JOHN Smithe QC</li>
<li class="call">DDI <span>09 333 4545</span></li>
<li class="call">MOB <span>027 545 6987</span></li>
<li>david.heaney#heaneypartners.com</li>
</ul>
<ul class="category-3 group">
<li class="name">Barry White</li>
<li class="call">DDI <span>021 487 5896</span></li>
<li class="call">MOB <span>024 787 9854</span></li>
<li>susan.thodey#heaneypartners.com</li>
</ul>
<ul class="category-2 group">
<li class="name">Peter Pan</li>
<li class="call">DDI <span>231234</span></li>
<li class="call">MOB <span>234234</span></li>
<li>23423423423</li>
</ul>
JS:
$(document).ready(function () {
$(function() {
var curPage="";
$("#selectMe-desk li a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("category-");
$(""+curPage).show();
});
});
});

You had several errors in both your JS and HTML. I also simplified bits of your code. Here is the fixed version: http://jsfiddle.net/rj8g0yh4/2/
HTML:
<ul class="filter-desk" id="selectMe-desk">
<li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
<li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
<li class="category-7"><a class="" href="#" data-page="category-7">Senior Associates</a></li>
<li class="category-8"><a class="" href="#" data-page="category-8">Associates</a></li>
<li class="category-9"><a class="" href="#" data-page="category-9">Solicitors</a></li>
<li class="category-10"><a class="" href="#" data-page="category-10">Management</a></li>
<li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>
<ul class="category-1 group">
<li class="name">JOHN Smithe QC</li>
<li class="call">DDI <span>09 333 4545</span></li>
<li class="call">MOB <span>027 545 6987</span></li>
<li>david.heaney#heaneypartners.com</li>
</ul>
<ul class="category-3 group">
<li class="name">Barry White</li>
<li class="call">DDI <span>021 487 5896</span></li>
<li class="call">MOB <span>024 787 9854</span></li>
<li>susan.thodey#heaneypartners.com</li>
</ul>
<ul class="category-2 group">
<li class="name">Peter Pan</li>
<li class="call">DDI <span>231234</span></li>
<li class="call">MOB <span>234234</span></li>
<li>23423423423</li>
</ul>
JS:
$(function() {
$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function() {
var $a = $(this);
$(".group").hide().filter("."+$a.data("page")).show();
});
});

Use JavaScript to Wrap Unique Groups of Elements with DIVs

I am using a WordPress plugin that dynamically creates the following list on the fly:
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
I need to wrap specific lis in unique divs like this:
<ul>
<div id="main">
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</div>
<div id="carbs">
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</div>
<div id="spice">
<li class="spices"></li>
<li class="herbs"></li>
</div>
<div id="other">
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</div>
</ul>
I've read about using the wrapall() function but I can't find instructions on how to wrap a group of elements that do not have the same class.

Assuming that you take the time to define the relationship between the class-names and the eventual id under which they should appear, and that you use valid HTML, the following plain JavaScript works (albeit I think it could be refined):
var grouped = {
'main' : ['proteins','seafood','dairy','veggies','fruit'],
'carbs' : ['nuts-seeds','grains','pasta'],
'spice' : ['spices','herbs'],
'other' : ['technique','special','servings']
};
function groupBy(el, map) {
var els,
newList = document.createElement('ul'),
newListItem = document.createElement('li'),
tmpList, tmpLI;
for (var key in map) {
if (map.hasOwnProperty(key)){
els = el.querySelectorAll('.' + map[key].join(', .'));
tmpList = newList.cloneNode();
tmpLI = newListItem.cloneNode();
tmpLI.appendChild(tmpList);
tmpLI.id = key;
for (var i = 0, len = els.length; i < len; i++){
tmpList.appendChild(els[i]);
}
el.appendChild(tmpLI);
}
}
}
groupBy(document.querySelector('ul'),grouped);
JS Fiddle demo.
The above function converts:
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
Into:
<ul>
<li id="main">
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</ul>
</li>
<li id="carbs">
<ul>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</ul>
</li>
<li id="spice">
<ul>
<li class="spices"></li>
<li class="herbs"></li>
</ul>
</li>
<li id="other">
<ul>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
</li>
</ul>

Categories