Develop Reference

trying to use query selector to select a specific child in a html document

site i am selecting from looks roughly like this
<div class="start-left">
...
<div class="news-post">...</div>
<div class="news-post">...</div>
<!-- want to get this one above -->
<div class="news-post">...</div>
<div class="news-post">...</div>
<div class="news-post">...</div>
<div class="news-post">...</div>
...
</div>
tried this but didnt work on either firefox or chrome
document.querySelector('.start-left div:nth-child(2)')
is this even possible or do i need to rething how i am doing this? I am using puppeteer for a webscraper and need to be able to press a link in a specific news post, e.g the second one

nth-child(n) counts all children of the element, regardless of the type of element (tag name). If there are other elements of different type coming before your target element nth-child will fail to find the correct element and may return null.
However, the selector nth-of-type(n)
matches elements based on their position among siblings of the same
type (tag name)
and ignores elements of a different type.
// nth-child(2) returns null because the 2nd element is not a div
var wrongElement = document.querySelector('.start-left div:nth-child(2)');
// nth-of-type(2) filters using the type of element
var correctElement = document.querySelector('.start-left div:nth-of-type(2)');
console.log('div:nth-child(2): ' + wrongElement);
console.log('div:nth-of-type(2): ' + correctElement.outerHTML);
<div class="start-left">
<p class="news-post">...</p>
<p class="news-post">Not this</p>
<div class="news-post">...</div>
<div class="news-post">This one</div>
<!-- want to get this one above -->
<div class="news-post">...</div>
</div>
You could use your work-around by adding the number of preceding elements to the selector, eg nth-child(4), however, a more robust solution is to use nth-of-type(2).

How to select specific element without using id or classes

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

How to Generating Dynamic ID in JQuery without using For Loop?

There are 7 Question in form with number 1.1 to 1.4 and 2.1 to 2.3, having Radio as answer(ID: #radio_1.1 and #radio_1.2) and textarea for comments(ID: #textarea_1.1, #textarea_1.2).
Questions are dependent on one another like question 1.4 answer if selected "yes" in radio, then will disable textbox of Question 2.2. Also, need to achieve this functionality during click as well as on load.
Following is way i am generating question id for now in JQuery/Javascript:
for(var tabNumber=1;tabNumber<=2;tabNumber++) {
var questions=0;
if(tabNumber==1) questions=4;
if(tabNumber==2) questions=3;
for(var decimalNumber=1;decimalNumber<=questions;decimalNumber++){
disableit(tabNumber+"\\."+decimalNumber,value); //This generate id of comment box like #textarea_1.1, #textarea_1.2 and radio also like #radio_1.1 and #radio_1.1 and even few classs like .Class_1.1 and .Class_1.2
}
}
in disableit we have functionality like:
$(".Class_"+number).addClass("yahooeffect");
$("#textarea_"+number).attr('disabled', true);
Is there any alternative in JQuery/Javascript which helps to remove for loop and do above operations in another simpler way? Any Regular expression which can help me like .Class_[1.1-1.9] etc, so that i can applu things in just one or two statements?
Update
Each Question is in one line. Like (1.1 - Do you want bird? YES/NO Comment) (1.2 - Do you want Doggy? Yes/No Comment). Each of these 4 in seperate div like div for 1.1 and div for question and div for radio and div for comment. So ID's are separated as explained in question. Questions have mixed dependency

Have elements have a common class. For example, class="question". Then you can target all of them using $(".question"). If they have unique IDs, use ID to target them individually: id="question-1.1" and $("#question-1.1"). If you can't use IDs, assign two classes: class="question question-1.1", then you can use $(".question") for all or $(".question-1.1") for one.

Try uniqueId
Example:
$(selector).uniqueId();
HTML:
<div class="checked">1</div>
<div class="checked">2</div>
<div class="checked">3</div>
<div class="checked">4</div>
<div class="checked">5</div>
<div class="checked">6</div>
<div class="checked">7</div>
<div class="checked">8</div>
<div class="checked">9</div>
<div class="checked">10</div>
<div class="checked">11</div>
<div class="checked">12</div>
JS:
$(document).ready(function () {
$(".checked").uniqueId();
});
Result:
<div class="checked" id="ui-id-1">1</div>
<div class="checked" id="ui-id-2">2</div>
<div class="checked" id="ui-id-3">3</div>
<div class="checked" id="ui-id-4">4</div>
<div class="checked" id="ui-id-5">5</div>
<div class="checked" id="ui-id-6">6</div>
<div class="checked" id="ui-id-7">7</div>
<div class="checked" id="ui-id-8">8</div>
<div class="checked" id="ui-id-9">9</div>
<div class="checked" id="ui-id-10">10</div>
<div class="checked" id="ui-id-11">11</div>
<div class="checked" id="ui-id-12">12</div>
Demo: http://jsfiddle.net/GCu2D/693/
Many widgets need to generate unique ids for elements. .uniqueId() will check if the element has an id, and if not, it will generate one and set it on the element. It is safe to call .uniqueId() on an element without checking if it already has an id. If/when the widget needs to clean up after itself, the .removeUniqueId() method will remove the id from the element if it was added by .uniqueId() and leave the id alone if it was not. .removeUniqueId() is able to be smart about this because the generated ids have a prefix of "ui-id-".

How to find elements that are not deeper than a selector?

I am building a jQuery plugin to manage form collections. The plugin aims to add add, remove, move up and move down buttons to alter that collection.
A collection's root node always contains a selector, such as .collection.
A button can be anything as soon as it has the .add class
I implemented min and max options, so add and remove buttons disappear accordingly. My problem comes up when I try to manage a collection of form collections: how to select only the add buttons that refers to the right collection?
To simplify the problem, look at the following HTML code:
<div class="collection">
<div>something</div>
<div>something</div>
<div>
<div class="add">+</div>
</div>
<div>something</div>
<div class="collection">
<div>something</div>
<div>something</div>
<div>
<div class="add">+</div>
</div>
<div>something</div>
</div>
</div>
Keep in mind that the button can be arbitrary deep: collection is built by an user and I don't know where can be the button in the dom. BTW, it is deeper than the .collection, that's all I know.
How to select all add buttons until the second .collection, but not further?
For those interested, this plugin is available (but in active dev) here.

I will assume you have a reference to the .collection object that you want to find the add buttons for in a variable called target. If so, you can do it like this:
target.find(".add").filter(function(i, element) {
return $(element).closest(".collection").get(0) === target.get(0);
});
This finds all the .add buttons that are in a given .collection and then removes any who are contained in a nested .collection instead of directly in the target .collection.

Try
$(".add").not($(".collection:gt(0) .add"));
Note,
Utilizing jQuery .not()'s .not( selector ) , where selector is selctor string
.not( selector ) version added: 1.0
selector Type: Selector or Element or Array A string containing a
selector expression, a DOM element, or an array of elements to match
against the set.
$(".add").not(".collection:gt(0) .add") http://jsfiddle.net/47wc5L96/21/
did not appear to return same results as .not( selection ) , where selection is jQuery object
.not( selection ) version added: 1.4
selection Type: jQuery An
existing jQuery object to match the current set of elements against.
$(".add").not($(".collection:gt(0) .add")); http://jsfiddle.net/47wc5L96/20/
console.log($(".add").not($(".collection:gt(0) .add")));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="collection">
<div>something</div>
<div>something</div>
<div>
<div class="add">+</div>
</div>
<div>something</div>
<div class="collection">
<div>something</div>
<div>something</div>
<div>
<div class="add">+</div>
</div>
<div>something</div>
</div>
</div>

Select nth child in jquery javascript

select nth child like this I want to select seconds child .
$(this).prev().children[1].removeClass("necry").addClass("necry_er");
And this HTML
<div class="reg_label">
<div class="def">Family</div>
<div class="necry">Necessary Field</div>
<div class="clear"> </div>
</div>
I expect this result:
<div class="necry_er">Necessary Field</div>

Use eq() to reduce a set of matched elements to the one at the specified index.
$(this).prev().children().eq(1).removeClass("necry").addClass("necry_er");
There's also a :nth-child selector:
$('#elementID:nth-child(2)').doSomething();
To just swap the two classes you can do:
$('.necry').toggleClass('necry necry_er');
How exactly to go about finding the element you want is a little hard to tell, as there is no explanation as to what this is or what context it is in ?

what about something like this?
var nec = $(this).parent().find(".necry");
nec.removeClass("necry");
nec.addClass("necry_er");