I am trying to create a on-click function for each button, hence i need a way to select each one individually without using ids
<div class="col">
<div>
<b>Name:</b> <span>John</span> <button>change</button>
</div>
<div>
<b>Surname:</b> <span>Doe</span> <button>change</button>
</div>
<div>
<b>Email:</b> <span>doe#gmail.com</span> <button>change</button>
</div>
<div>
<b>Birth date:</b> <span>13 May 1947</span> <button>change</button>
</div>
</div>
You have a lot of selector that you can use if you don't want to use class or ids, even though I highly suggest you to use them whenever possible for the sake of comprehensibility.
Here, you could use the :nth-of-type(selector) like this.
// Select the first button of your page.
document.querySelector('button:nth-of-type(1)');
// Select the first button of your .col
document.querySelector('.col button:nth-of-type(1)');
Here is a list of selectors you can use
div b ~ button
div button
.col div button
You can try the selectors here: http://try.jsoup.org/~91Zdheyo7rX9PpORdECPjMxb890
Related
I'm trying to access the second instance of 'div.question.question-dropdown input'. I have tried incorporating the typical :nth-child() and :nth-last-child() type pseudo selectors but they are being ignored. Below is the JS code I'm trying to achieve; but adding the unique Data to the second instance (but can't find a way to unique select).
.waitForElementVisible("div.question.question-dropdown input",400)
.click('div.question.question-dropdown input')
.setValue('div.question.question-dropdown input', Data.CreateOpp.motivation)
.pause(500)
.waitForElementVisible("div.question.question-dropdown input",400)
.click('div.question.question-dropdown input')
.setValue('div.question.question-dropdown input', Data.CreateOpp.motivation)
.pause(500)
.click('div.question-btn.question-btn-submit')
The mark-up is 2 different input form fields, within 2 div.question.question-dropdown.
<!-- first -->
<div class="question question-dropdown">
<div class="smart-input">
<label></label>
<input>
</div>
</div>
<!-- second -->
<div class="question question-dropdown">
<div class="smart-input">
<label></label>
<input>
</div>
</div>
In my opinion nth selector should work:
"div.question.question-dropdown:nth-of-type(2) input"
But if not, you can try XPath:
"(//div[#class="question question-dropdown"])[1]//input"
How can I select element in this HTML using jquery selectors.
<div class = 'divOne">
</div>
<div class = 'divTwo">
<h3>Title</h3>
</div>
$('.divOne').siblings('.divTwo').children('h3')
$(".divOne") to perform jquery functions on first div
$(".divTwo") to perform jquery functions on second div
$("h3") to perform jquery functions on header element
It's pretty simple to select the h3 element.
But you have to fix your HTML first. While, when writing HTML5, in general it's possible to use single-quotes. But, you have to use them at the start and the end of the value like this: <div class='divOne' /> or <div class="divOne" />
$('.divTwo > h3').css('border', '1px solid red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divOne">
</div>
<div class="divTwo">
<h3>Title</h3>
</div>
You could use the jQuery selector and select h3 with $('h3'). But maybe you have more than one h3-tags in your code.
In that case you could give the h3 a class and select the class with the selector.
Example:
<div class = "divOne">
</div>
<div class = "divTwo">
<h3>Title</h3>
</div>
In this case use: $('h3');
OR
<div class = "divOne">
</div>
<div class = "divTwo">
<h3 class="myClass">Title</h3>
</div>
And in this case you use $('.myClass');
-----------
In the above I explained how you could select an h3-tag, but it does work with all elements ofcourse ;)
I also noticed that you use single quotes and double quotes in your HTML ('divOne")
Do not use both for a single attribute. Just "divOne" or 'divOne'.
How can i select this specific span tag and change the color of the text to white, without using id's? This is the friend section on the page younow, i try to inject a code to change the css of the page, so i am not able to add any id's..
<div id="leftsidebar">
<div class="channel-menu-content">
<div class="left-panel">
<div class="panel-title nowrap short-text" ng-if="leftSidebar.session.user.userId !== 0" ng-click="leftSidebar.friendsCollapsed = !leftSidebar.friendsCollapsed">
<span translate="sidebar_online_friends">Freunde</span>
</div>
</div>
</div>
</div>
I found this, and tried it like this:
$("div#leftsidebar .channel-menu-content.left-panel.panel-title span").css("color","white");
$("div#leftsidebar .channel-menu-content.left-panel.nowrap span").css("color","white");
$("div#leftsidebar .channel-menu-content.left-panel.short-text span").css("color","white");
But no success.
You dont have spaces between class names
$('#leftsidebar .channel-menu-content .left-panel .panel-title span')
You can use attribute equals selector
$("span[translate=sidebar_online_friends]").css("color", "white")
Assuming Jquery is loaded in the page you can select the span element using:
$("span[translate='sidebar_online_friends']")
you could then change the colour by doing:
$("span[translate='sidebar_online_friends']").css("color","#FFF")
I have this :
<div class="div1">
<div class="div2">
<div class="div3">
<div>
<input></input>
</div>
<input></input>
</div>
</div>
</div>
I want to get the input tag with JQuery and use Css.
I tried this :
$('.div1 :input').css('background-color','blue');
but it doesn't work.
The problem is that there is an other input tag?
Edit :
Sorry for not having detailed.
I use a Date Control Form from Nintex and his input tag already has css by default. Problem solved!
As you have updated, via comment, that you just want the first input, use either the first() method on the search result, or use the :first selector. Examples of both below:
$('.div1 :input').first().css('background-color','blue');
http://jsfiddle.net/TrueBlueAussie/3LftU/2/
or
$('.div1 :input:first').css('background-color','blue');
http://jsfiddle.net/TrueBlueAussie/3LftU/3/
As you mentioned in your comment that a plugin has an input field whose css you want to change which already is their, you can do something like this
$('.div1 :input').style('background-color','blue','important');
I'm trying to use next() to toggle a div. The problem is that the "trigger" is in a different div than the one I want to toggle. An example that works:
$("span.trigger").click(function(){
$(this).next("div.task_description").slideToggle("fast");
});
<span class="trigger">The trigger</span>
<div class="task_description ">
some content
</div>
But the way I need the html setup is:
<div>
<span class="trigger">The trigger</span>
</div>
<div class="task_description ">
some content
</div>
That doesn't work... any suggestions?
In this case you need a .parent() as well, like this:
$("span.trigger").click(function(){
$(this).parent().next("div.task_description").slideToggle("fast");
});
Alternatively, if your nesting may change, you can go up to the <div> you're in, like this:
$(this).closest("div").next("div.task_description").slideToggle("fast");