How can i get id ofparent onclick of child - javascript

How can i get id of list item onclick of anchor. I want to display id of list item via Javascript alert. Here is my source:

Since you use jquery, use parent() and attr() functions:
function myClickFunction(){
var id = $(this).parent().attr("id");
};

You can use .parent() and .attr() or [0].id as follows:
$('.child').on('click', function() {
var id = $(this).parent()[0].id; //or $(this).parent().attr('id');
});
You would do well not to use inline JS.
$(function() {
$('ul a').on('click', function() {
var id = $(this).parent()[0].id; //or $(this).parent().attr('id');
alert( id );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="li1"><a>Click1</a></li>
<li id="li2"><a>Click2</a></li>
<li id="li3"><a>Click3</a></li>
</ul>

Use some thing like this ..
<script>
function myClickFunction(a){
var id = a.parentNode.id;
alert("I just clicked list item: " + id);
};
</script>
</head>
<body>
<ul>
<li id=li1"><a onClick="myClickFunction(this);">Click1</a></li>
<li id=li2"><a onClick="myClickFunction(this);">Click2</a></li>
<li id=li3"><a onClick="myClickFunction(this);">Click3</a></li>
</ul>
</body>
</html>

Related

How to get jquery array from html each list item

<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
I have something like this on HTML file. So how can I get that each list item in my jQuery file as array
like this
var asmg = ["listitem1","listitem2","listitem3"];
use the jQuery.map() and .get() to process a plain array.
var asmg = $( "li" )
.map(function() {
return $(this).text();
}).get();
console.log(asmg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
try with foreach loop :
function getArray(ul){
asmg = [];
ul.find('li').each(function(){
asmg.push($(this).text());
});
return asmg;
}
console.log(getArray($('ul')));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
Try following
$(function(){
var asmg = [];
$("ul > li").each(function(i, li){
asmg.push($(li).text());
});
console.log(asmg);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
You can use vanilla JavaScript to achieve this:
Select all the li elements
document.querySelectorAll('li')
unpack them in an array
[...document.querySelectorAll('li')]
map this array to get the text content of each li item.
[...document.querySelectorAll('li')].map(e => e.textContent)
Here is the code:
const li = [...document.querySelectorAll('li')].map(e => e.textContent)
console.log(li)
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
var asmg = Array.from(document.querySelectorAll('li')).map(e => e.textContent);
var asmg = Array.from(document.querySelectorAll('li')).map(e => e.textContent);
console.log(asmg);
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem3</li>
</ul>
var varObject = $('ul li').map(function(){
return $(this).text();
}).get();
//converting to array
var aiMsg = $.makeArray(varObject);
this code works for me.
thanks for all the answer

Get child element attribute using Jquery

I have a html structure. I want to get all controltypeid value in a function. I just try like
$('#firstDiv > a.[controltypeid]').each(function (i, val) {
$Control = $(val);
});
<div id="firstDiv">
<a id="1" controltypeid="1"></a>
<a id="2" controltypeid="2"></a>
<a id="3" controltypeid="3"></a>
</div>
but I can't get the value.Can any one help. Thanks in advance for help.
Done using jquery children selector.
Description :Get the children of each element in the set of matched elements.
Code :
$(document).ready(function(){
$("#firstDiv").children('a[controltypeid]').each(function(){
alert($(this).attr('controltypeid'))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="firstDiv">
<a id="1" controltypeid="1"></a>
<a id="2" controltypeid="2"></a>
<a id="3" controltypeid="3"></a>
</div>
You could also use simply like this
$('#firstDiv a').each(function () {
alert($(this).attr('controltypeid'));
});
Try this if you need your controltypeid in a array:
var controltypeid = [];
$('#firstDiv > a[controltypeid]').each(function (i, v) {
controltypeid.push($(v).attr( "controltypeid" ));
});
console.log(controltypeid);
Did everyone forget about .map?
Example:
var controlTypeIds = $('#firstDiv').children().map(function() {
return $(this).attr('controltypeid');
}); // ['1', '2', '3']
Or, if you want to continue using your selector, remove the extra .. The . selector selects class, but having a attribute selector right after it .[...] makes no sense and is not syntactically correct.
var controlTypeIds = $('#firstDiv>a[controltypeid]').map(function() {
return $(this).attr('controltypeid');
}); // ['1', '2', '3']
a.[controltypeid] is wrong and is replaced by a[controltypeid]
secondly, use attr() to get the attribute value.
$('#firstDiv > a[controltypeid]').each(function () {
console.log( $( this ).attr( "controltypeid" ) );
});
if you just want to get all the values in a string
var controltypeids = [];
$('#firstDiv > a[controltypeid]').each(function () {
controltypeids.push( $( this ).attr( "controltypeid" ) );
console.log( $( this ).attr( "controltypeid" ) );
});
alert( controltypeids.join( "," ) );
You can get following way using JQuery. using attr
Make following changes in Jquery.
$('#firstDiv > a').each(function () {
alert($(this).attr('controltypeid'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstDiv">
<a id="1" controltypeid="1"></a>
<a id="2" controltypeid="2"></a>
<a id="3" controltypeid="3"></a>
</div>

jQuery find data attributes with one datakey and multiple values

I want to retrive all the objects with one datakey and multiple values, for QuickSand:
<ul>
<li data-company="Microsoft">Steve</li>
<li data-company="Google">Jobs</li>
<li data-company ="Facebook">Michael</li>
<li data-company ="Google">Richard</li>
<li data-company ="Facebook">Tim</li>
</ul>
How can i retreve all the li items with data-company Microsoft and Google (these two values are in a array) like this:
var itemes = $('ul').find('li[data-comapany={"Microsoft","Google"}]');
Thank you.
you could create an array of the required companies, and check for each li if the data is contained in that array:
var companies = ["Microsoft", "Google"];
$(function() {
var items = $('ul li').filter(function() {
return $.inArray($(this).data("company"), companies) > -1;
});
items.css({
"position": "relative",
"margin-left": "25px"
});
console.log(items);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-company="Microsoft">Steve</li>
<li data-company="Google">Jobs</li>
<li data-company="Facebook">Michael</li>
<li data-company="Google">Richard</li>
<li data-company="Facebook">Tim</li>
</ul>
You could filter it:
var itemes = $('ul').find('li').filter(function(){
return $(this).data('company').match(/Microsoft|Google/);
});
-DEMO-
To handle case for LI without any data-company set, you should use:
var itemes = $('ul').find('li').filter(function(){
var data = $(this).data('company');
return data ? data.match(/Microsoft|Google/) : null;
});
You can also combine selectors:
var items = $("[data-company*='Microsoft'], [data-company*='Google']");
jsFiddle
You could do it like this:
var companies = ['Google', 'Microsoft', 'Waffle House'];
companies.forEach(function(company, index) {
companies[index] = "li[data-company='" + company + "']";
});
$('ul').find(companies.join(',')).css('background', 'red');

jQuery selectable serialize into an array

I have a selectable:
<ol id="selectable">
<li class="ui-widget-content">1</li>
<li class="ui-widget-content">2</li>
<li class="ui-widget-content">3</li>
</ol>
I want to capture every selected item body into a hidden input separated by a comma, so after selecting some items it would look for example like this:
<input type="hidden" id="bad_times" name="bad_times" value="1,3" />
where 1,3 are bodies of the items selected. Any examples from the web I tried failed to work. Please note that only selected items have to be captured, if I select some item, then unselect, then select again it should appear only once. How to achieve it?
Following assumes that jQuery UI selectable plugin is being used
If so you can try something like this and build on it
$(function() {
$("#selectable").selectable({
filter: "li" ,
unselected:mapSelected,
selected:mapSelected
});
});
function mapSelected(event,ui){
var $selected = $(this).children('.ui-selected');
var text = $.map($selected, function(el){
return $(el).text()
}).join();
$('#bad_times').val(text)
}
DEMO
What have you tried so far and where were you running into issues?
Based on the docs the selected items have the class 'ui-selected'
So you should just be able to iterate over the selected items something like:
var str = "";
$( ".ui-selected").each(function(i) {
if (i > 0)
str += ",";
str += $(this).text();
});
$('#bad_times').val(str);
I would be in favor of using a data attribute, say, data-value and using an array, [1,3], instead of a list 1,3.
Special Note: The demo and code below simply help to verify the concept and do not use the selectable plugin.
HTML:
<input type="hidden" id="bad_times" name="bad_times" data-value="[]" />
JS:
$(function() {
var hidden = $('#bad_times');
$('#selectable li').on('click', function() {
var val = +$(this).text();
hidden.data()['value'].indexOf(val) > -1 || hidden.data()['value'].push(val);
console.log( hidden.data()['value'] );
});
});
$(function() {
var hidden = $('#bad_times');
$('#selectable li').on('click', function() {
var val = +$(this).text();
hidden.data()['value'].indexOf(val) > -1 || hidden.data()['value'].push(val);
$('pre.out').text( JSON.stringify( hidden.data()['value'] ) );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="selectable">
<li class="ui-widget-content">1</li>
<li class="ui-widget-content">2</li>
<li class="ui-widget-content">3</li>
</ol>
<input type="hidden" id="bad_times" name="bad_times" data-value="[]" />
<pre class="out"></pre>

Sortable list to update hidden input

I have an unordered list that is sortable using jQuery. The sort function(s) works fine and is below. Each list item has an id on this format- id="post_#" where the # is a unique number. I need to update the hidden input value with the order of the list items after they're sorted, but only the #. So if the order of the items was > post_3, post_2, post_4, post_1 < then the input value would be- value="3,2,4,1"
Here's the jQuery I have so far-
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(function() {
jQuery("#wpbody-content #post_sortable_list").sortable({ opacity: 0.6, cursor: \'move\', update: function() {
var order = $(this).sortable;
}
});
});
});
</script>
And the HTML-
<div id="wpbody-content">
<ul id="post_sortable_list">
<li id="post_1">foo</li>
<li id="post_2">bar</li>
<li id="post_3">hello</li>
<li id="post_4">world</li>
</ul></div>
<input type="hidden" name="posts_order" value="" />
can you do something like
var order = '';
$('#post_sortable_list').find('li').each( function () {
order = order + $(this).text().substring(5);
});
$('posts_order').val(order);
possible i'm way off base
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(function() {
jQuery("#wpbody-content #post_sortable_list").sortable({ opacity: 0.6, cursor: \'move\', update: function() {
var order = $(this).map(function(i, e){
return $(e).attr("id").substring(5);
}.join(", ");
}
});
});
});
</script>
Try using map to get all the Ids and then joining them into a string.

Categories

Resources