Блог

Сценарий:

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

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

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

 <!-- 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 для 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">amp;#x2714;</span>'
                    ,'<span class="showgridparts-off">amp;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
  

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

 $(".container > #first");
  

или

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

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

 $("#first");
  

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

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

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

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

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

Если вам также нужно отфильтровать только те дочерние 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 selector, которую использует 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() function и предоставил анонимную функцию, которая будет вызываться для каждого элемента в наборе, this ключевое слово фактически ссылается на элемент DOM.

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

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

Чтобы получить все divs в ‘container’, используйте следующее:

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

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

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

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

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

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

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

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

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

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

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

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