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

Question

Сценарий:

Я получил меню, содержащее ссылки:

Main Menu Item
--------------
Sub: Show Grid > SubSub: <a>Show #first</a>
                         <a>Show #second</a>
                         <a>Show #third</a>

Теперь мне нужно найти все div с помощью css #ID, которые являются DOM-элементами первого уровня внутри .container div. Эти элементы должны быть добавлены в «Sub: Show Grid» и добавить класс, щелкнув по нему.

<!-- The mark up -->
<div class="container">
    <div id="first">1st</div>
    <div id="second">2nd</div>
    <div id="third">3rd</div>
</div>

Вопрос:

• Как мне найти div первого уровня с (не определено / не известно) #ID с jQuery?
• Как мне взаимодействовать с результатом в php - получу ли я массив как результат для построения из него меню SubSub?

Заранее спасибо!

---

Редактировать # 1

Чтобы было понятнее, что я пытаюсь сделать - в псевдокоде:

$divs_received_from_jquery_fn = 'how do I get the divs (IDs?) as array(?) and interact with them in the following code?';
foreach ( $divs_received_from_jquery_fn as $div )
{
    add_menu_item( array( 
         'parent' => 'Sub: Show Grid'
        ,'name'   => 'Show #'.$div
        ,'href'   => ''
        ,'meta'   => array( 
                        'onclick' => 'jQuery(".container #".$div).toggleClass("showgrid");'
         ) 
    ) );
}

Редактировать # 2

Пример "реального мира". Результатом является событие onclick для ссылки. Моя проблема в том, что я хочу вызывать функцию foreach для каждого div[id] ниже .container div и просто не знаю, как правильно взаимодействовать с javascript & php.

?>
<script type="text/javascript">
    jQuery(".container > div[id]").each(function(){
        var context = $(this);
        <?php 
        // SHOWGRID - parts
        // @since v0.3
        $wp_admin_bar->add_menu( // trigger the function via the global $wp_admin_bar var that calls the class
            array(
                 'parent'   => 'showgrid' // parent menu item
                ,'id'       => 'showgrid - ' + this.id // menu item ID
                ,'title'    => sprintf( // menu item label
                     __( '%1$s show grid parts %2$s%3$s', OXO_TEXTDOMAIN )
                    ,'<span style="background: none;">'
                    ,'<span class="showgridparts-on hide">&#x2714;</span>'
                    ,'<span class="showgridparts-off">&times;</span>' 
                 )
                ,'href'     => '' // stays empty to not trigger anything
                ,'meta'     => array( // HERE GOES THE ACTUAL jQuery FUNCTION
                    'onclick'   => 'jQuery("#" + this.id).toggleClass("showgrid"); jQuery(".showgridparts-on").toggleClass("hide"); jQuery(".showgridparts-off").toggleClass("hide"); return false;'
                 )
            ) 
        );
        ?>
    });
</script>
<?php

Answer 1

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

$(".container > #first");

или

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

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

$("#first");

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

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

Поскольку вы говорите, что не знаете их идентификатора, верхняя пара верхних селекторов (где написано #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's 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.Это очень поможет вам в будущем, потому что могут быть некоторые селекторы, о которых вы вообще не знаете и которые могут значительно облегчить вашу жизнь.

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

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

$(".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);
    ...
});

Надеюсь, это прояснит некоторые вещи для вас.

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

С http://api.jquery.com/jQuery/

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

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

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

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

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