I have two same ids but in different divs and I am trying to create a click event
<div data-group = "points">
<div>
<ul>
<li id="first point"></li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li id="first point"></li>
</ul>
</div>
</div>
I have created a onclick event like this
this._toolbox._container.on('click', "[id = 'first point']", function (ev) {
}
But this is listening to all the ids with 'first point'.
How can I create a click event only when 'first point' inside data-group="points" is clicked
Any suggestions or help would be appreciated.
First problem is that id should be unique in whole document. Two elements shouldn't have same id. You should use class for that.You can use [data-group=points] before the selector.
You don't need to select id or class using attribute selector. Just use # for id and . for class
$('[data-group=points] .first-point').click(function(){
console.log("I am clicked")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
<div>
<ul>
<li class="first-point">one</li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first-point">two</li>
</ul>
</div>
</div>
You can use the same attribute equals selector with the descendant selector.
this._toolbox._container.on('click', '[data-group="points"] [id="first point"]', function (ev) {
});
$(document).on('click', '[data-group = "zone"] [id ="first point"]', function(ev) {
console.log('clicked');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group="points">
<div>
<ul>
<li id="first point">1</li>
</ul>
</div>
</div>
<div data-group="zone">
<div>
<ul>
<li id="first point">2</li>
</ul>
</div>
</div>
From MDN docs:
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
id's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID.
FYI : The id should be unique in a context so always use class instead of id for a group of elements.
HTML :
<div data-group = "points">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
Script :
this._toolbox._container.on('click', '[data-group="points"] .first_point', function (ev) {
});
$(document).on('click', '[data-group="points"] .first_point', function(ev) {
console.log('clicked');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group="points">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
<div data-group="zone">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
You can try this code here: The $(el).click() not work when you add a dynamic element or contents. so you can choose any one solutions.
$(document).on('click','[data-group="points"] li',function(){
console.log("you are points datagroup clicked");
});
$(document).on('click','[data-group="zone"] li',function(){
console.log("you are points zone clicked");
});
//or
$(document).on('click','[data-group] li',function(){
if( $(this).parents('[data-group="points"]') ){ // check group item parent type
console.log(" points datagroup clicked");
}
else if( $(this).parents('[data-group="zone"]') ){ // check group item parent type
console.log("points zone clicked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
<div>
<ul>
<li class="first-point">one</li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first-point">two</li>
</ul>
</div>
</div>
= = =
Thank you
= = =
Related
I need div.edit-button to toggle its sibling div.additionalFieldForm.
Note that there's more than one div.edit-button and div.additionalFieldForm on the page, but I would like to target the div.additionalFieldForm that is in the same "family" as the div.edit-button that was clicked.
$(".edit-button").click(function () {
// PROBLEMATIC SELECTOR BELOW:
$(this).closest("div").prev().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm">Content</div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm">Content</div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
</ul>
I've tried other selectors but I couldn't specifically target just the div.additionalFieldForm sibling of the edit button being clicked.
EDIT: I realize that there must be an underlying problem because the selector works on jsFiddle (http://jsfiddle.net/wf7jjoq7/), but not on my site, without any console errors.
Try using siblings()
$(".edit-button").click(function () {
$(this).siblings(".additionalFieldForm").toggle();
});
Try this solution:
$(".edit-button").click(function () {
// PROBLEMATIC SELECTOR BELOW:
$(this).parent().find(".additionalFieldForm").first().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm"></div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm"></div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
</ul>
li is the common parent. So,
$(".edit-button").click(function () {
$(this).closest("li").find(".additionalFieldForm").toggle();
});
I need to add a class to the closest div with a given id after I click the div above it. My example below should make more sense of what I need.
<style>
.menuContent {display:none;}
.expandMenu {display:inherit;}
</style>
<ul>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent');">+</div>
<div id="menuContent" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent');">+</div>
<div id="menuContent" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
</ul>
This is the script I have so far that searches the class names of the given element and adds or removes the 'expandMenu' class when clicked.
<script>
function expandMenu(x) {
var d = document.getElementById(x);
var c = d.className;
if (c.search("expandMenu") === -1) {
d.className += " expandMenu";
} else {
d.className = c.replace(" expandMenu","");
}
}
</script>
This is all working fine, the issue is when clicking the 'menuIcon' in the second 'li', it's the first 'li' element that the script is applied too - it's obviously just finding the first 'menuContent' and applying the className function to it.
How can I limit the function to only apply to the 'menuContent' div that is directly after it.
I don't want to use jQuery either - good ol' fashioned plain Javascript would be great.
Give the menu icons unique ids, and pass that id to the function. Toggle based on the id, instead of the class. You are right, it is choosing the first one because it has found it when running through the code.
You should not have the same id on multiple elements. Try changing one of the id's and passing the new id to the function.
<style>
.menuContent {display:none;}
.expandMenu {display:inherit;}
</style>
<ul>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent1');">+</div>
<div id="menuContent1" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent2');">+</div>
<div id="menuContent2" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
</ul>
I have html rendered in the format below.
I want to be able to get the values 13,14,15 and store in different variables.
I want to be able to get the value id=9 as well for this row.
I will be updating a table and needs this Id together with the other rows.
Here is the html rendered
<li class="main">
<ul class="sub">
<li id="9">
<div class="innera">13</div>
<div class="innerb">14</div>
<div class="innerc">15</div>
<div class="innerpencil">
<img class="modify" src="/images/icon-pencil" />
</div>
</li>
</ul>
<li>
Here is the jquery I am trying to write
$(document).on("click", "img.modify", function () {
var rowA = $("ul[class='sub'] li[div.class innera]")
var rowB = $("ul[class='sub'] li[div.class innerb]")
var rowB = $("ul[class='sub'] li[div.class innerc]")
var Id of row ?
});
Right now I am not getting anything for the variables? Kindly assist.
I think you just need to review the jQuery (CSS) selectors: https://api.jquery.com/category/selectors/
$("ul[class='sub'] li[div.class innera]") won't match anything.
$('ul.sub>li>div.innera') would work, but maybe you want something a little different. Take a look at the selectors docs, and some trial and error :)
Can't you use a foreach loop on the li tag?
Like this?
$(document).on("click", "img.modify", function () {
var id = $('.sub > li').first().attr("id");
console.log(id);
$('#'+id+' > .divValue').each(function () {
var variableName = $(this).text();
console.log(variableName);
});
});
}
I would add an class to the elements value you want.
Like this:
<li class="main">
<ul class="sub">
<li id="9">
<div class="innera divValue">13</div>
<div class="innerb divValue">14</div>
<div class="innerc divValue">15</div>
<div class="innerpencil">
<img class="modify" src="/images/icon-pencil" />
</div>
</li>
</ul>
<li>
I have a html fragment as follows:
<div id="samplediv">
<ul>
<li name="A">
<a id="A">
</li>
<li name="B">
<a id="B">
</li>
</ul>
</div>
I have a text called:
var text = "B";
I have want to check if the text matches with any of the elements of li and add a class name "disable" for the anchor element not matching with text.
I my case I want to add a class called "disable" for
<a id="A">
This is what I have tried:
$("#samplediv li").each(function() {
if($(this).name != text){
$(this).closest("a").addClass("disabled");
}
});
But the thing here is $(this).name is evaluating to "undefined" . What is it that I am missing?
Edit: Due to typo ,had missed the tag
There are multiple issues,
$(this) returns a jQuery object which does not have name property, instead you can use $(this).attr('name')
.closest() is used to find the ancestor element, but the a is a descendant of the li element, so you need to use find()
You can find all the li elements which does not have the given name and then find the a element within it like
var text = 'B';
$("#samplediv li").not('[name="' + text + '"]').find("a").addClass("disabled");
a.disabled {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="samplediv">
<ul>
<li name="A">
<a id="A">a</a>
</li>
<li name="B">
<a id="B">b</a>
</li>
</ul>
</div>
var text = "B";
$("#samplediv li").filter(function() {//use filter
return $(this).attr('name') != text;//use .attr() to get name attribute
}).find('a').addClass("disabled");//use find to get the anchor tag
.disabled{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="samplediv">
<ul>
<li name="A">
<a id="A">a</a>
</li>
<li name="B">
<a id="B">b</a>
</li>
</ul>
</div>
Use .filter()
Description: Reduce the set of matched elements to those that match the selector or pass the function's test.
I wonder if someone could please help me.
I'm trying to add a class of 'active' to a div with the same id as a link. When the page loads the first div will be active but I then want to click on a link and add a class of active to a div on the page so I display this div.
HTML:
<ul id="items">
<li>
item 1
</li>
<li>
item 2
</li>
<li>
<a href="#" id="3" item 3</a>
</ul>
<div id="product-info">
<div id="1" class="active">
product info
</div>
<div id="2">
product info
</div>
<div id="3">
product info
</div>
</div>
jQuery:
var buttons = $('#items').find('a');
buttons.click(function(){
var id = $(this).attr('id');
var product = $('product-info div');
var productId = product.attr('id');
product.removeClass('active');
}
I'm guessing I need to add an if statement here to say something like if id equal to product id add class
I've tried a few variations but just can't get it. Any help to solve this would be fantastic. If you want to go one step further and suggest a better way I'm all ears.
Thanks in advance
$( 'li' ).on( 'click', function() {
$('div').eq( $(this).index() ).addClass( 'active' );
});
But you need more restrictive to selectors.
If you want to show only one div at a time :
$( 'li' ).on( 'click', function() {
$('div').removeClass( 'active' ).eq( $(this).index() ).addClass( 'active' );
});
I usually do this by setting the href of the link tag to point at the id of the target element and then use the href attribute inside the jQuery function. So, something like:
HTML:
<ul id="items">
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 3
</ul>
<div id="product-info">
<div id="1" class="active">
product info
</div>
<div id="2">
product info
</div>
<div id="3">
product info
</div>
</div>
jQuery:
$("#items").find("a").click(function(e) {
$("#product-info").find("div").removeClass("active"); $(e.href).addClass("active", true);
});
I hope you will not get me wrong, but you shouldn't have elements with the same id. Id's are the means of "identification" and because of that they need to be unique: https://stackoverflow.com/a/9454716/880114
Arguably, browser implementations are to blame here, because of being too loose on such important rules' following.
html
what i understand you want to replace and hide your divs depending on link click.That way You dun need same ids for more than one id :)
here class hide should b display:none; that will work for you
<ul class="au-img">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
<div class="default-text"></div>
<div class="about-1" >1</div>
<div class="about-2 hide" >2</div>
<div class="about-3 hide" >3</div>
javascript
<script type="text/javascript">
$('.au-img li').on("click", function(e) {
var $this = $(this),
$id = $this.attr('id'),
$class = '.' + $('.about-' + $id).attr('class').replace('hide', '');
$('.default-text').addClass('hide');
$('.about-' + $id).removeClass('hide');
$('div[class*=about]').not($class).addClass('hide');
});
</script>