게시물 a태그에 text가 없을 때 if문 적용안됨

게시물 a태그에 text가 없을 때 if문 적용안됨

QA

게시물 a태그에 text가 없을 때 if문 적용안됨

본문

1954324395_1674633214.8008.png

1954324395_1674633243.5252.png

 

 

질문을 통해 게시물 목록을 사진처럼 만들었습니다.

글이 없을 때 border을 안나오도록 하려고 처음엔 a태그의 href 글자수를 확인하여 글자수가 0 일때 border가 안보이도록 하였는데 적용이 안됐습니다.

그래서 기존 css에 border을 없애고 a의 text에 글자수가 0이 아닐때 border이 나오도록 적용했는데 보시다시피 text가 없음에도 border가 뜹니다..

 

저는 글이 없을 땐 border-bottom이 안나오도록 하고싶은데 계속 코드를 바꿔도 적용이 안되서 어렵습니다..

혹시 제가 고쳐야할 부분을 알려주시거나 새 해결방법을 알려주시면 정말로 감사하겠습니다!

 

http://test10.dothome.co.kr/g5/bbs/board.php?bo_table=news

여기는 해당 사이트입니다.

 

아래는 제가 짠 코드입니다.


<script>
jQuery(function(x) {
    let bo_a = $(".td_news a");
    let a_text = bo_a.prop("text");
    let a_arr = a_text.length;
 
    console.log(a_arr);
 
    if (a_arr != 0) {
        $(".td_news").css("border-bottom", "1px solid #c1c1c1");
    }
});
</script>

이 질문에 댓글 쓰기 :

답변 4


$('.bo_h2').each(function() { if($(this).children('a').text().trim().length == 0){ $(this).parent().css("border-bottom", "0px"); } })

 

더보기 클릭할떄마다 위 코드 이벤트 발생시켜주면 됩니다.

스크립트 대신 css 처리방법 입니다.

 

- 관련 스트립트 삭제

- /g5/theme/joanlabor/skin/board/news/style.css


...
.news_left .td_news {margin: 50px 40px 0 0;}
.news_left .td_news:first-child {margin-top: 0;}
 
/* ------------------------------- 추가 ------------------------------- */
.td_news { border-bottom: 1px solid rgb(193, 193, 193); }
.td_news:has(.bo_h2 a[href=""]) { border-bottom: 0 none; }
/* ------------------------------- 추가 ------------------------------- */
 
.bo_img {
    overflow: hidden;
    max-width: 556px;
    height: 822px;
}
...

Php에서 하시면 더 간단할 텐데요.

두분 다 다르지만 좋은 코드를 알려주셔서 채택을 어떻게 할지 정말 고민했습니다 ㅜㅜ 그래서 먼저 적으신분께 드렸어요!!  두 분 다 정말 멋진 코드고 멋진 코드 알려주셔서 감사합니다!

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT