第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

遍歷div以將特定類與jquery匹配

遍歷div以將特定類與jquery匹配

胡子哥哥 2021-04-27 12:10:21
我要嘗試做的是，如果特定div組中的div與主體類ID號(hào)（例如，）具有相同的類ID號(hào)（例如，“。post-123”-ID號(hào)是“ 123”）。 postid-123'），然后向該div添加一個(gè)具有相同ID號(hào)的新類。在我的代碼中，所有內(nèi)容似乎都運(yùn)行正確，只是它沒有在組中的所有div之間循環(huán)-只是將新類追加到組中的第一個(gè)div上。jQuery / JS：<script>jQuery(document).ready(function($) {    var current_post_id = get_current_post_id();    var current_project_id = get_current_project_id();    function get_current_post_id() {        var body_class = $('body.single-project');        var post_id = '';        if(body_class) {            var classList = body_class.attr('class').split(/\s+/);            $.each(classList, function(index, item) {                if (item.indexOf('postid') >= 0) {                    var item_arr = item.split('-');                    post_id = item_arr[item_arr.length -1];                    return false;                }            });        }        return post_id;    }    function get_current_project_id() {        var project = $('.et_pb_portfolio .et_pb_portfolio_item');        var project_id = '';        if(project) {            var classList = project.attr('class').split(/\s+/);            $.each(classList, function(index, item) {                if (item.indexOf('post') >= 0) {                    var item_arr = item.split('-');                    project_id = item_arr[item_arr.length -1];                    return false;                }            });        }        return project_id;    }    if (current_post_id == current_project_id) {            $('.et_pb_portfolio #post-' + current_project_id).addClass('current-project');        }    console.log('project id is: ' + current_project_id);    console.log('page id is: ' + current_post_id);});</script>
查看完整描述

2 回答

?
慕姐8265434

TA貢獻(xiàn)1813條經(jīng)驗(yàn) 獲得超2個(gè)贊

這是執(zhí)行此操作的一種更簡(jiǎn)單的原始方法。

const getCurrentProjectId = () => { 

  let postId = Array.from(document.querySelector('body').classList).find(cls => cls.indexOf('postid-') > -1).split('-')[1];

  

  return `post-${postId}`;

  

}


console.log(getCurrentProjectId());


document.addEventListener('DOMContentLoaded', () => {

  let currentProject = getCurrentProjectId();

  document.querySelectorAll('.project').forEach(proj => {

    if(proj.classList.contains(currentProject)) proj.classList.add('current-project');

  });

});

.current-project {

  border: 2px solid red;

}

<body class="project-template-default single single-project postid-688 logged-in admin-bar has-stick chrome windows et_button_icon_visible et_button_custom_icon et_pb_button_helper_class et_transparent_nav et_fullwidth_nav et_fullwidth_secondary_nav et_non_fixed_nav et_show_nav et_cover_background et_secondary_nav_enabled et_secondary_nav_two_panels et_pb_gutter et_pb_gutters3 et_primary_nav_dropdown_animation_fade et_secondary_nav_dropdown_animation_fade et_pb_footer_columns4 et_header_style_left et_pb_pagebuilder_layout et_smooth_scroll et_right_sidebar et_divi_theme et-db et_minified_js et_minified_css customize-support"<div class="et_pb_module et_pb_portfolio et_pb_portfolio_0  et_pb_bg_layout_light">

    <div class="et_pb_ajax_pagination_container">

        <div id="post-708" class="post-708 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/finite-element-analysis/" title="Finite Element Analysis">Finite Element Analysis</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-702" class="post-702 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/refinery-project-water-wash-system/" title="Refinery Project – Water Wash System">Refinery Project – Water Wash System</a>

            </h3>   

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-695" class="post-695 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/marcellus-compression-station/" title="Marcellus Compression Station">Marcellus Compression Station</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-693" class="post-693 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/houston-ship-channel-tank-farm-expansion/" title="Houston Ship Channel – Tank Farm Expansion">Houston Ship Channel – Tank Farm Expansion</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-688" class="post-688 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/process-safety-management-pha-lopa-analysis/" title="Process Safety Management – PHA &amp; LOPA Analysis">Process Safety Management – PHA &amp; LOPA Analysis</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

    </div>

</div>

</body>

這是使用find的選項(xiàng)（假設(shè)只有一個(gè)帖子）：

const getCurrentProjectId = () => `post-${Array.from(document.querySelector('body')

                                               .classList)

                                               .find(cls => cls.indexOf('postid-') > -1)

                                               .split('-')[1]}`;


console.log(getCurrentProjectId());


document.addEventListener('DOMContentLoaded', () => {

  let currentProject = getCurrentProjectId();

  Array.from(document.querySelectorAll('.project'))

       .find(proj => proj.classList.contains(currentProject))                                            .classList.add('current-project');

});

.current-project {

  border: 2px solid red;

}

<body class="project-template-default single single-project postid-688 logged-in admin-bar has-stick chrome windows et_button_icon_visible et_button_custom_icon et_pb_button_helper_class et_transparent_nav et_fullwidth_nav et_fullwidth_secondary_nav et_non_fixed_nav et_show_nav et_cover_background et_secondary_nav_enabled et_secondary_nav_two_panels et_pb_gutter et_pb_gutters3 et_primary_nav_dropdown_animation_fade et_secondary_nav_dropdown_animation_fade et_pb_footer_columns4 et_header_style_left et_pb_pagebuilder_layout et_smooth_scroll et_right_sidebar et_divi_theme et-db et_minified_js et_minified_css customize-support"<div class="et_pb_module et_pb_portfolio et_pb_portfolio_0  et_pb_bg_layout_light">

    <div class="et_pb_ajax_pagination_container">

        <div id="post-708" class="post-708 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/finite-element-analysis/" title="Finite Element Analysis">Finite Element Analysis</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-702" class="post-702 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/refinery-project-water-wash-system/" title="Refinery Project – Water Wash System">Refinery Project – Water Wash System</a>

            </h3>   

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-695" class="post-695 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/marcellus-compression-station/" title="Marcellus Compression Station">Marcellus Compression Station</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-693" class="post-693 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/houston-ship-channel-tank-farm-expansion/" title="Houston Ship Channel – Tank Farm Expansion">Houston Ship Channel – Tank Farm Expansion</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-688" class="post-688 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/process-safety-management-pha-lopa-analysis/" title="Process Safety Management – PHA &amp; LOPA Analysis">Process Safety Management – PHA &amp; LOPA Analysis</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

    </div>

</div>

</body>

這是一個(gè)考慮到BenM對(duì)ID的評(píng)論的選項(xiàng)

const getCurrentProjectId = () => `post-${Array.from(document.querySelector('body')

                                               .classList)

                                               .find(cls => cls.indexOf('postid-') > -1)

                                               .split('-')[1]}`;


console.log(getCurrentProjectId());


document.addEventListener('DOMContentLoaded', () => {  

  document.querySelector(`#${getCurrentProjectId()}`).classList.add('current-project');

});

.current-project {

  border: 2px solid red;

}

<body class="project-template-default single single-project postid-688 logged-in admin-bar has-stick chrome windows et_button_icon_visible et_button_custom_icon et_pb_button_helper_class et_transparent_nav et_fullwidth_nav et_fullwidth_secondary_nav et_non_fixed_nav et_show_nav et_cover_background et_secondary_nav_enabled et_secondary_nav_two_panels et_pb_gutter et_pb_gutters3 et_primary_nav_dropdown_animation_fade et_secondary_nav_dropdown_animation_fade et_pb_footer_columns4 et_header_style_left et_pb_pagebuilder_layout et_smooth_scroll et_right_sidebar et_divi_theme et-db et_minified_js et_minified_css customize-support"<div class="et_pb_module et_pb_portfolio et_pb_portfolio_0  et_pb_bg_layout_light">

    <div class="et_pb_ajax_pagination_container">

        <div id="post-708" class="post-708 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/finite-element-analysis/" title="Finite Element Analysis">Finite Element Analysis</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-702" class="post-702 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/refinery-project-water-wash-system/" title="Refinery Project – Water Wash System">Refinery Project – Water Wash System</a>

            </h3>   

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-695" class="post-695 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/marcellus-compression-station/" title="Marcellus Compression Station">Marcellus Compression Station</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-693" class="post-693 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/houston-ship-channel-tank-farm-expansion/" title="Houston Ship Channel – Tank Farm Expansion">Houston Ship Channel – Tank Farm Expansion</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

        <div id="post-688" class="post-688 project type-project status-publish hentry et_pb_post et_pb_portfolio_item">

            <h3 class="et_pb_module_header">

                <a href="/project/process-safety-management-pha-lopa-analysis/" title="Process Safety Management – PHA &amp; LOPA Analysis">Process Safety Management – PHA &amp; LOPA Analysis</a>

            </h3>

        </div><!-- .et_pb_portfolio_item -->

    </div>

</div>

</body>


查看完整回答
反對(duì) 回復(fù) 2021-05-06
?
躍然一笑

TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊

為什么您需要遍歷所有div元素才能做到這一點(diǎn)？


由于ID屬性應(yīng)該始終是唯一的，因此您可以從body類中提取ID ，然后選擇相關(guān)元素：


if( $('body').hasClass('single-project') )

{

    var postID = /(postid-)[0-9]+/gm.exec($('body').attr('class'))[0].replace('postid-', '');


    $('#post-' + postID).addClass('current-project');

}


查看完整回答
反對(duì) 回復(fù) 2021-05-06
  • 2 回答
  • 0 關(guān)注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)