Question

我正在使用Java / HTML5开发一个项目，我在JS中创建了一个脚本以获得更好的显示效果。（我刚开始学习JS / jQuery）

所以我的HTML代码是这样的：

...
<section id="prod">
<h2>PROD</h2>
         <article class="service">
              <h3>A title</h3>
                  <p> p element </p>
                  <p> p element </p>
                  ...
          </article>
         <article class="service">
              <h3>A title</h3>
                  <p> p element </p>
                  <p> p element </p>
                  ...
          </article>
          ...
</section>
<section id="otherprod">
<h2>OTHERPROD</h2>
         <article class="service">
              <h3>A title</h3>
                  <p> p element </p>
                  <p> p element </p>
                  ...
          </article>
         <article class="service">
              <h3>A title</h3>
                  <p> p element </p>
                  <p> p element </p>
                  ...
          </article>
          ...
</section>

我需要获得所有“prod部分”，意思是来自具有id =“prod”的部分的文章。所以，为此，我做了查询：

var elements = document.getElementById('prod').getElementsByTagName(
        'article');

允许我将section对象转换为元素。问题是它似乎不能正常工作，因为我从“otherprod”中获取了一些元素到我的元素对象中。

是否有可能获得一个jQuery查询，它给出了我要求的节点的对象列表，就像我现在一样？因为接下来的事情是

for ( var i = 0; i < elements.length; i++) {
    current = elements[i].getElementsByTagName('p').length;
    ...
}

谢谢：）

Answer 1

你的问题只是选择权吗？这是JQuery中选择器的一个很好的链接， https://cdn.tutsplus.com/net/uploads/legacy/154_cheatsheet/jquery12_colorcharge.png

此外，您的代码位于jsfiddle中，其中包含您想要的选择器。

http://jsfiddle.net/7d5U2/

//all sections with id prod
$('section#prod').css('background-color','red');
//All articles within section#prod 
$('section#prod article').css('background-color','blue');

所有jquery选择器都返回一个元素数组。即使只有一个。然后，您可以将任何内容应用于返回的元素。虽然像.val（）这样的东西只会对返回数组中的第一个元素起作用。

Answer 2

那工作？

// Loop all section, or replace by #prod for just one section
$('section').each(function(){
   var $section = $(this); // Current section

   // Loop all acticle on this section
   $('article', $section).each(function(){
       var $artcile = $(this); // Current Article

       // Display count p on this $article
       console.log( $('p', $article).length );
   });

});

// Select all sections
$('section') ....

// Select only one
$('#prod') ....

// Select all articles
$('section article') ....

// Select articles from one section 
$('#prod article') ....

// Select all p 
$('section article p') ....
// Or simply
$('p') ....

Answer 3

$('#prod>article, #otherprod>article').each(function(){
  var actualArticleValue = $(this).val();
 //foo bar
 });

这可以是每个函数，允许您遍历prod和otherprod中的所有文章。

优化JS查询

3 个答案: