javascript - jQuery - 数据提取问题（html遍历）

Question

在我的页面中有一个名为“手风琴”的标签。这是它的内部html：

<DIV class="group section" jQuery18007183007327795561="8">
    <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="5">
        <SPAN class="ui-icon ui-icon-triangle-1-e">
        </SPAN>
        <A tabIndex=-1 href="#">
            1. section name
        </A>
    </H3>
    <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel jQuery18007183007327795561="31">
        <DIV id=accordion1 class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons ui-sortable" role=tablist jQuery18007183007327795561="11">
            <DIV class=group jQuery18007183007327795561="14">
                <H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role=tab tabIndex=0 aria-selected=true jQuery18007183007327795561="12">
                    <SPAN class="ui-icon ui-icon-triangle-1-s">
                    </SPAN>
                    <A tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        4900bc3b-a086-4d0c-89b8-09e3724aac8e
                    </SPAN>
                </DIV>
            </DIV>
            <DIV class=group jQuery18007183007327795561="15">
                <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="13">
                    <SPAN class="ui-icon ui-icon-triangle-1-e">
                    </SPAN>
                    <A tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        0d59f87e-a294-4f85-beae-a0e266ab6a7e
                    </SPAN>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</DIV>
<DIV class="group section" jQuery18007183007327795561="9">
    <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="6">
        <SPAN class="ui-icon ui-icon-triangle-1-e">
        </SPAN>
        <A tabIndex=-1 href="#">
            2. section name
        </A>
    </H3>
    <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel>
        <DIV id=accordion2 class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons ui-sortable" role=tablist jQuery18007183007327795561="16">
            <DIV class=group jQuery18007183007327795561="20">
                <H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role=tab tabIndex=0 aria-selected=true jQuery18007183007327795561="17">
                    <SPAN class="ui-icon ui-icon-triangle-1-s">
                    </SPAN>
                    <A tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        1cbd8a6b-3a90-4ee7-8072-68663b42e937
                    </SPAN>
                </DIV>
            </DIV>
            <DIV class=group jQuery18007183007327795561="21">
                <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="18">
                    <SPAN class="ui-icon ui-icon-triangle-1-e">
                    </SPAN>
                    <A tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        5a02ebe6-41cd-441c-9b4e-7c40e4e6d8f9
                    </SPAN>
                </DIV>
            </DIV>
            <DIV class=group jQuery18007183007327795561="22">
                <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="19">
                    <SPAN class="ui-icon ui-icon-triangle-1-e">
                    </SPAN>
                    <A tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        f4408171-033b-454c-9fc1-5849e7c0c65b
                    </SPAN>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</DIV>
<DIV class="group section" sizset="true" sizcache006684201465290301="0.0.5" jQuery18007183007327795561="10">
    <H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role=tab tabIndex=0 aria-selected=true jQuery18007183007327795561="7">
        <SPAN class="ui-icon ui-icon-triangle-1-s">
        </SPAN>
        <A tabIndex=-1 href="#">
            3. section name
        </A>
    </H3>
    <DIV style="PADDING-BOTTOM: 11px; DISPLAY: block; OVERFLOW: auto; PADDING-TOP: 11px" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel sizset="false" sizcache006684201465290301="0.0.5" jQuery18007183007327795561="30">
        <DIV id=accordion3 class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons ui-sortable" role=tablist sizset="false" sizcache006684201465290301="0.0.5" jQuery18007183007327795561="23">
            <DIV class=group jQuery18007183007327795561="27">
                <H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role=tab tabIndex=0 aria-selected=true jQuery18007183007327795561="24">
                    <SPAN class="ui-icon ui-icon-triangle-1-s">
                    </SPAN>
                    <A tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        a45a589c-e829-4ea7-b615-a7975b1dcf31
                    </SPAN>
                </DIV>
            </DIV>
            <DIV class=group jQuery18007183007327795561="28">
                <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="25">
                    <SPAN class="ui-icon ui-icon-triangle-1-e">
                    </SPAN>
                    <A tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        20f03252-bad2-4016-9bab-b8be5b07761e
                    </SPAN>
                </DIV>
            </DIV>
            <DIV class=group jQuery18007183007327795561="29">
                <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="26">
                    <SPAN class="ui-icon ui-icon-triangle-1-e">
                    </SPAN>
                    <A tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        4ab593fd-cf32-4eb0-814a-29b1486ee121
                    </SPAN>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</DIV>

我希望能够提取文本，但只能提取某些文本。结构如下：

1. <section name>
    <item>
    <item>
    .
    .
    .
2. <section name>
3. <section name>
.
.
.

我需要提取部分名称和项目 ID 号（例如 4900bc3b-a086-4d0c-89b8-09e3724aac8e）。

根据提取，我需要创建一个包含所有数据组合的字符串（以一种以后易于阅读且没有任何缺陷的方式），例如： <section name>~~<item ID>,<item ID>^^<section name>~~<item ID>,<item ID>...等

如何编写 jquery 选择代码？我不知道...

注意：请注意，该部分的类是“组部分”，而项目的类是“组”，也许这会有所帮助？

谢谢

Answer 1

我建议阅读 jquery 的选择器文档。http://api.jquery.com/category/selectors/

Answer 2

您可以按如下方式修改此 Html：

<DIV class="group section" jQuery18007183007327795561="8">
    <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="5">
        <SPAN class="ui-icon ui-icon-triangle-1-e">
        </SPAN>
        <A class="SelectThis" tabIndex=-1 href="#">
            1. section name
        </A>
    </H3>
    <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel jQuery18007183007327795561="31">
        <DIV id=accordion1 class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons ui-sortable" role=tablist jQuery18007183007327795561="11">
            <DIV class=group jQuery18007183007327795561="14">
                <H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role=tab tabIndex=0 aria-selected=true jQuery18007183007327795561="12">
                    <SPAN class="ui-icon ui-icon-triangle-1-s">
                    </SPAN>
                    <A class="SelectThis" tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        4900bc3b-a086-4d0c-89b8-09e3724aac8e
                    </SPAN>
                </DIV>
            </DIV>
            <DIV class=group jQuery18007183007327795561="15">
                <H3 aria-expanded=false class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role=tab tabIndex=-1 aria-selected=false jQuery18007183007327795561="13">
                    <SPAN class="ui-icon ui-icon-triangle-1-e">
                    </SPAN>
                    <A class="SelectThis" tabIndex=-1 href="#">
                        item name
                    </A>
                </H3>
                <DIV style="DISPLAY: none" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role=tabpanel>
                    <A href="#">
                        Edit Item
                    </A>
                    <BR>
                    <SPAN style="DISPLAY: none">
                        0d59f87e-a294-4f85-beae-a0e266ab6a7e
                    </SPAN>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</DIV>
.......

现在在类名“SelectThis”上使用 jquery 选择器函数， .each()遍历它们中的每一个并读取值。这能解决吗？如果不是，请分享您面临的问题。