JQuery - получить все div в div с классом ".container"

Ответ 1

Известный идентификатор

$(".container > #first");

или

$(".container").children("#first");

или поскольку идентификаторы должны быть уникальными в пределах одного документа:

$("#first");

Последний, конечно, самый быстрый.

Неизвестный идентификатор

Так как вы говорите, что не знаете свою верхнюю пару ID верхних селекторов (где #first), можно изменить на:

$(".container > div");
$(".container").children("div");

Последний (из первых трех селекторов), который использует только идентификатор, конечно, не может быть изменен таким образом.

Если вам также нужно отфильтровать только те дочерние элементы DIV, которые определяют атрибут ID, вы должны записывать селектора следующим образом:

$(".container > div[id]");
$(".container").children("div[id]");

Прикрепить обработчик кликов

Добавьте следующий код, чтобы присоединить обработчик кликов к любому из ваших предпочтительных селекторов:

// use selector of your choice and call 'click' on it
$(".container > div").click(function(){
    // if you need element ID
    var divID = this.id;
    cache your element if you intend to use it multiple times
    var clickedDiv = $(this);
    // add CSS class to it
    clickedDiv.addClass("add-some-class");
    // do other stuff that needs to be done
});

Спецификация селекторов CSS3

Я также хотел бы указать вам на спецификацию селектора CSS3, которую использует jQuery. Это поможет вам в будущем в будущем, потому что могут быть некоторые селектор, о которых вы вообще не знаете, и могли бы сделать вашу жизнь намного проще.

После вашего отредактированного вопроса

Я не совсем уверен, что знаю, что тебе нужно, даже если вы написали какой-то псевдокод... В любом случае. На некоторые детали все еще можно ответить:

$(".container > div[id]").each(function(){
    var context = $(this);
    // get menu parent element: Sub: Show Grid
    // maybe I'm not appending to the correct element here but you should know
    context.appendTo(context.parent().parent());
    context.text("Show #" + this.id);
    context.attr("href", "");
    context.click(function(evt){
        evt.preventDefault();
        $(this).toggleClass("showgrid");
    })
});

последнее использование context может быть объединено в одно целое:

context.text(...).attr(...).click(...);

Что касается элементов DOM

Вы всегда можете получить подстилающий элемент DOM из набора результатов jQuery.

$(...).get(0)
// or
$(...)[0]

предоставит вам первый элемент DOM из набора результатов jQuery. Результат jQuery всегда представляет собой набор элементов, хотя в них нет ни одного, ни одного.

Но когда я использовал функцию .each() и предоставил анонимную функцию, которая будет вызываться для каждого элемента в наборе, ключевое слово this фактически ссылается на элемент DOM.

$(...).each(function(){
    var DOMelement = this;
    var jQueryElement = $(this);
    ...
});

Надеюсь, это облегчит вам некоторые вещи.

Ответ 2

Чтобы получить все div в контейнере, используйте следующее:

$(".container>div")  //or
$(".container").children("div");

Вы можете указать конкретный #id вместо div, чтобы получить конкретный.

Вы говорите, что хотите div с идентификатором 'undefined'. если я правильно понимаю вас, следующее это достигнет:

$(".container>div[id=]")

Ответ 3

Чтобы установить класс при нажатии на div сразу в элементе .container, вы можете использовать:

<script>
$('.container>div').click(function () {
        $(this).addClass('whatever')
    });
</script>

Ответ 4

Из http://api.jquery.com/jQuery/

Контекст селектора По умолчанию селектор выполняет поиск в DOM, начиная с корня документа. Однако альтернативный контекст может быть задан для поиска, используя необязательный второй параметр для функции $(). Например, чтобы выполнить поиск в обработчике событий, поиск может быть ограничен следующим образом:

$( "div.foo" ).click(function() { 
   $( "span", this ).addClass( "bar" );
});

Когда поиск селектора диапазона ограничен контекстом этого, только промежутки внутри элемента с щелчком получат дополнительный класс.

Итак, для вашего примера я бы предложил что-то вроде:

$("div", ".container").each(function(){
     //do whatever
 });