jquery - 使用 Jquery 获取具有不同组织的代码中的值

Question

我想使用Jquery从下面的代码中获取信息:

<div id="filtro_informacoes">

        <div class="categoria_filtro">
            <b>Category 1</b>
        </div>

        <div class="curso_filtro">
            <b>Course 1</b>
        </div>

        <div class="curso_filtro">
            <b>Course 2</b>
        </div>      

        <div class="categoria_filtro">
            <b>Category 2</b>
        </div>  

        <div class="curso_filtro">
            <b>Course 3</b>
        </div>

        <div class="curso_filtro">
            <b>Course 4</b>
        </div>

        <div class="curso_filtro">
            <b>Course 5</b>
        </div>

        <div class="curso_filtro">
            <b>Course 6</b>
        </div>
</div>

在代码中，“类别1”是“类(class)1”和“类(class)2”的“父亲”。“类别 2”是“类(class) 3”、“类(class) 4”、“类(class) 5”、“类(class) 6”的“父亲”。

我尝试使用Jquery中的“each”组件来获取结果，使用的代码如下:

var filterObject = $("#filtro_informacoes");
    $.each( filterObject, function( key ) {
        var cat_text = $(this).children('.categoria_filtro').text();
        console.log( key + ": " + cat_text );
        var filtro_curso = $(this).children('.curso_filtro').text();
        console.log( key + ": " + filtro_curso );
    });

以下是我从这段代码中得到的结果:

    Category 1    Category 2    Course 1    Course 2    Course 3    Course 4    Course 5    Course 6

但我想以这种方式得到结果

    Category 1    Category 1 - Course 1    Category 1 - Course 2    Category 2    Category 2 - Course 3    Category 2 - Course 4    Category 2 - Course 5    Category 2 - Course 6

我无法修改HTML页面的结构，我只能更改javascript/jquery代码。

我怎样才能做到这一点？

Answer 1

要实现此目的，您可以循环 .categoria_filtro 元素并使用 nextUntil() 获取以下子类(class)。然后，您可以循环这些类(class)并执行您需要的任何逻辑，如下所示:

$('.categoria_filtro').each(function() {
  var category = $(this).text().trim();
  console.log(category);

  $(this).nextUntil('.categoria_filtro').each(function() {
    var course = $(this).text().trim();
    console.log(category + ' - ' + course);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filtro_informacoes">
  <div class="categoria_filtro">
    <b>Category 1</b>
  </div>
  <div class="curso_filtro">
    <b>Course 1</b>
  </div>
  <div class="curso_filtro">
    <b>Course 2</b>
  </div>

  <div class="categoria_filtro">
    <b>Category 2</b>
  </div>
  <div class="curso_filtro">
    <b>Course 3</b>
  </div>
  <div class="curso_filtro">
    <b>Course 4</b>
  </div>
  <div class="curso_filtro">
    <b>Course 5</b>
  </div>
  <div class="curso_filtro">
    <b>Course 6</b>
  </div>
</div>