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

Сценарий:

У меня есть меню, содержащее ссылки:

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

Теперь мне нужно найти все div с css #ID, которые являются элементами уровня DOM первого уровня внутри div .container. Эти элементы должны добавляться к "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 первого уровня с (undefined/not known) #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 для a-link. Моя проблема в том, что я хочу вызвать функцию 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

ОТВЕТЫ

Ответ 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
 });